PDA

View Full Version : How to open/close or show/hide a panel from a button



Elfayer
6 Jul 2012, 4:21 AM
Hi,

I tried some things, but it don't want to work.

I have that on my controller :

Ext.define('DSK.controller.desktop', {
extend: 'Ext.app.Controller',

views: ['desktop.Taskbar', 'desktop.StartMenu'],

init: function () {
var status = false;
var menu = Ext.create('DSK.view.desktop.StartMenu');

menu.hide();
this.control({
'#startButton': {
click: this.openMenu
}
})
},
openMenu: function () {
if (status == false) {
menu.show();
status = true;
}
else {
menu.hide();
status = false;
}
}
});

With that code, when i click on the button it doesn't do anything.

Tim Toady
6 Jul 2012, 5:22 AM
The first thing I notice is that the variable status is not in scope in your openMenu function. I would expect it to throw an error.

Elfayer
6 Jul 2012, 5:24 AM
Now i have :


Ext.define('DSK.controller.desktop', {
extend: 'Ext.app.Controller',

views: ['desktop.Taskbar', 'desktop.StartMenu'],

init: function () {
var menu = Ext.create('DSK.view.desktop.StartMenu');

menu.setVisible(false);
this.control({
'#startButton': {
click: this.openMenu
}
})
},
openMenu: function () {
if (menu.isVisible() == false) {
menu.setVisible(true);
}
else {
menu.setVisible(false);
}
}
});

Same problem.

Tim Toady
6 Jul 2012, 11:21 AM
Can you share the code for your StartMenu component? Is this based on the Extjs desktop example?

Elfayer
8 Jul 2012, 11:11 PM
Yes, I'm trying to do something like the Web desktop example, but i didn't find source codes, or help.

StartMenu.js :


Ext.define('DSK.view.desktop.StartMenu', {
extend: 'Ext.panel.Panel',
alias: 'widget.startMenu',

layout: 'hbox',
title: 'Menu',
width: 300,
height: 300,
items: [{
xtype: 'menu',
width: 200,
height: 300,
floating: false,
items: [
{ text: 'regular item 1' },
{ text: 'regular item 2' },
{ text: 'regular item 3' }
]},
{
xtype: 'menu',
showSeparator: false,
width: 100,
height: 300,
floating: false,
items: [
{ text: 'Settings' },
{xtype: 'menuseparator'},
{ text: 'Logout' }
]
}],
renderTo: Ext.getBody()
});

Tim Toady
9 Jul 2012, 5:41 AM
You can find the source code of the web desktop example in your ext folder. It is in ext/examples/desktop. The StartMenu component they defined is in the js folder. They use it as the menu property on a button to control the showing/hiding of it. You can see how they add it in TaskBar.js.