PDA

View Full Version : How to add menu items dynamically ?



renganathan
13 Aug 2012, 10:34 PM
Hi All,

I want to add menu items dynamically . Please refer the following code ,

Here i am hard-cored two items abc & xyz but i want to add items dynamically based on the store ?

Can somebody help me how to do that ?

I am using extjs4.1 version





var menuButton= new Ext.Button(
{
text : 'Add ',
id : 'addtoTB',
iconCls : 'add',
tooltip :'Add ',
menu : new Ext.menu.Menu(
{
transitionType : 'slide',
delay : 0.2, // default
autoWidth: true, // default
transitionDuration: 0.3, // default
animate: true,
items:
[
{
text: 'abc',
checked: false,
group: 'theme',
handler : function()
{

}
},
{
text: 'xyz',
checked: false,
group: 'theme',
handler : function()
{

}
}

]
})
});

Farish
13 Aug 2012, 10:55 PM
Using the add method. First you create your new button and then:


newButton = Ext.create('Ext.Button', {
// button configs here
});

Ext.getCmp('menuID').add(newButton);

you can either add a unique id to your menu (here menuID) or use "down" to access the menu from you top level button.

sword-it
13 Aug 2012, 10:57 PM
HI!
here is a sample for you to create your menu by your store:-




Ext.create('Ext.toolbar.Toolbar', {
id:'menuToolbar',
listeners: {
beforerender: function() {
var store = Ext.create('Ext.data.Store', {
fields: ['text'],
proxy: {
type: 'ajax',
url: 'your URL',
reader: {
type: 'json',
root: 'Sample'
}
},
autoLoad: true,
listeners: {
load: function(store,records,success,operation,opts) {
var toolbar = Ext.getCmp('menuToolbar');
store.each(function(record) {
var menu = Ext.create('Ext.menu.Menu');
Ext.each(record.raw.menu, function(item){
menu.add({
text: item.text
})
});

toolbar.add({
xtype: 'button',
text: record.data.text,
menu: menu
});
});
}
}
});
}
}
});

renganathan
14 Aug 2012, 12:52 AM
Thanks for your solution.


Its working fine

leksodav
18 Sep 2014, 8:27 AM
Using the add method. First you create your new button and then:


newButton = Ext.create('Ext.Button', {
// button configs here
});

Ext.getCmp('menuID').add(newButton);

you can either add a unique id to your menu (here menuID) or use "down" to access the menu from you top level button.
this is good, worked for me