PDA

View Full Version : Howto: button click in tbar for change position or toggle panel items



elsendoorn
2 Feb 2010, 7:36 AM
Dear community,

I would like some help regarding the following. The idea is to build a class based from the Ext.panel which has a toolbar including a menu item to change the position of the items or to hide / unhide the items. Unfortunately Firebug consistently provides me with the error of


this.focusEl is undefined

when I click the submenu.

What am I doing wrong?


Below the code in which the Ext.panel is extended:



Application.BorderPanel = Ext.extend(Ext.Panel, {
initComponent: function() {
var config = {
header: false,
layout: 'border',
id: 'borderpanel',
border: false,
tbar: [{
pressed: false,
enableToggle: true,
text: 'Details Pane',
iconCls: 'preview',
split: true,
// toggleHandler: toggleDetails
handler: this.movePreview.createDelegate(this, []),
menu: {
id: 'details-menu',
cls: 'details-menu',
width: 100,
items: [{
text: 'Bottom',
checked: true,
group: 'details-grp',
checkHandler: this.movePreview,
scope: this,
iconCls: 'preview'
}, {
text: 'Right',
checked: false,
group: 'details-grp',
checkHandler: this.movePreview,
scope: this,
iconCls: 'preview'
}, {
text: 'Hide',
checked: false,
group: 'details-grp',
checkHandler: this.movePreview,
scope: this,
iconCls: 'preview'
}]
}
}],
items: [
{
id: 'cb_main_center',
region: 'center',
border: false,
layout: 'fit'
}, {
id: 'cb_main_south',
region: 'south',
border: false,
split: true,
height: 300,
html: 'south'
}, {
id: 'cb_main_east',
region: 'east',
border: false,
width: 350,
split: true,
hidden: true
}
]

};

Ext.apply(this, Ext.apply(this.initialConfig, config));
Application.BorderPanel.superclass.initComponent.apply(this, arguments);
},

movePreview: function(m, pressed) {
if(!m){ // cycle if not a menu item click
var items = Ext.menu.MenuMgr.get('details-menu').items.items;
var b = items[0], r = items[1], h = items[2];
if(b.checked){
r.setChecked(true);
}
else if(r.checked){
h.setChecked(true);
}
else if(h.checked){
b.setChecked(true);
}
return;
}
if(pressed){
var preview = "details content";
var right = Ext.getCmp('cb_main_east');
var bottom = Ext.getCmp('cb_main_south');
switch(m.text) {
case 'Bottom':
right.hide();
bottom.show();
bottom.ownerCt.doLayout();
break;
case 'Right':
bottom.hide();
right.show();
right.ownerCt.doLayout();
break;
case 'Hide':
bottom.hide();
right.hide();
Ext.getCmp('cb_main').ownerCt.doLayout();
break;
}
}
//Application.BorderPanel.superclass.movePreview.apply(this, arguments);
}
});

Ext.reg('borderpanel', Application.BorderPanel);


And the code invoking the placement of the Application.BorderPanel.


setmainpanel = function(attr) {
var mainpanel = Ext.getCmp('cb_main');
if(mainpanel.items != undefined){
mainpanel.items.each(function(item){
mainpanel.remove(item, true);
});
}
mainpanel.setTitle(attr.text);
mainpanel.add(new Application.BorderPanel);

mainpanel.doLayout();
};

Please help?!