PDA

View Full Version : extend toolbar class doesn't display



kdm
24 Feb 2011, 9:32 AM
I'm looking to create a simple class to contain predefined toolbar and call it by its xtype. When I run the code below the toolbar doesn't show up. Firebug doesn't list any errors. Did I extend the class properly?


Ext.namespace('mscToolBar');

mscToolBar.mainToolBar = Ext.extend(Ext.Toolbar, {

initComponent:function() {
var menuSearch = new Ext.menu.Menu({
id: 'menuSearchID',
items: [
{text: 'Applications'},
{text: 'Circuits'},
{text: 'Devices'},
{text: 'Interfaces'},
{text: 'Locations'}
]
});

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, menuSearch));
mscToolBar.mainToolBar.superclass.initComponent.apply(this, arguments);
},

onRender:function(){

this.add({
text: 'Search',
menu: this.menuSearch
});
mscToolBar.mainToolBar.superclass.onRender.apply(this, arguments);
}
});

Ext.reg('mainToolBar', mscToolBar.mainToolBar);


Then call it through xtype.


items:[
new Ext.BoxComponent({
xtype: 'mainToolBar'
})
]

kdm
25 Feb 2011, 6:57 AM
Anybody??

kdm
25 Feb 2011, 9:58 AM
Playing around i can get the menu to render if i do not use the xtype. If I defined a var and call the class and render it the menu is displayed. So i guess my question is how can i make sure the object is rendered when using xtype?



Ext.namespace('mscToolBar');

mscToolBar.mainToolBar = Ext.extend(Ext.Toolbar, {

initComponent:function() {
var config = {
items: [
{text: 'Applications'},
{text: 'Circuits'},
{text: 'Devices'},
{text: 'Interfaces'},
{text: 'Locations'}
]
}
});

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
mscToolBar.mainToolBar.superclass.initComponent.apply(this, arguments);
},

onRender:function(){

//add this when using xtype
this.doLayout();

mscToolBar.mainToolBar.superclass.onRender.apply(this, arguments);
}
});

Ext.reg('mainToolBar', mscToolBar.mainToolBar);




var mainMenuToolBar = new mscToolBar.mainToolBar({

});
mainMenuToolBar.render(somehtmlobject);