PDA

View Full Version : Ext.create vs Ext.apply (menu button showing only on Ext.apply)



davlozi10
4 Jun 2013, 11:52 PM
Hello. I've noticed when I use something like:


xtype: 'grid',
store: Ext.create('someStore'),
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'id',
},
{
xtype: 'gridcolumn',
dataIndex: 'name',
}
],

dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
text: 'Export',
icon: 'images/export.png',
menu: Ext.create('Ext.menu.Menu', {
items: [{
xtype: 'button',
icon: 'images/pdf.png',
name: 'pdf'
},{
xtype: 'button',
name: 'csv',
icon: 'images/csv.png'
},{
xtype: 'button',
name: 'html',
icon: 'images/html.png'
}]
})
},
]
}
],
}]


Next time I create this grid, "menu" is not showing (menu panel is not created).

When I do this:


initComponent: function(){

Ext.apply(this, {
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [
{xtype: 'button',
text: 'Export',
icon: 'images/export.png',
menu: Ext.create('Ext.menu.Menu', {
items: [{
.....................................
this.callParent();






Then it works. Why is the Ext.create() not creating the menu instance every time I create the grid and Ext.apply does?

And how can I call the Ext.apply and THEN the parent? Shoudn't the parent first do what it must and then I should call Ext.apply to finish the job?

Thank you!

friend
5 Jun 2013, 3:57 AM
I noticed that you're doing an Ext.create() on your menu, yet everything else is xtyped. I would xtype everything.

Also note that you have dangling commas after each dataIndex attribute in your column configs. This will definitely cause you grief in Internet Explorer

davlozi10
5 Jun 2013, 5:37 AM
No, no, this is just an example. It's not about the syntax right now, but thanks. :)

jasewell
5 Jun 2013, 2:46 PM
No, no, this is just an example. It's not about the syntax right now, but thanks. :)
Nevertheless, friend's point about using all xtypes is valid. I think what's happening is an id collision in your menus, since the id property is generated once and only once, when Ext.create('Ext.menu.Menu', {...}) is called. When you reuse the grid config later, the menu is already a fully fledged component with an id, which would not happen if you did

menu: { xtype: "menu", ... }
instead of

menu: Ext.create('Ext.menu.Menu', {...})