PDA

View Full Version : Renderung toolbar with json data



mk.ranjan
19 Nov 2012, 3:38 AM
Am trying to create toolbar with json data, but facing problem in creating submenu items of toolbar.

I tried using add method and able to display the menus but not able to create the menu items,
below is my code for toolbar

Ext.define('MenuToolBar', { extend: 'Ext.toolbar.Toolbar',
alias: 'widget.menutoolbar',
requires: [
'Ext.button.Split',
'Ext.toolbar.Toolbar'
],
layout: 'hbox',


initComponent: function() {
var me = this;

Ext.create('MenuToolBar', {
listeners: {
load: function(store){
me.add(Ext.Array.pluck(store.getRange(), 'data'));
},
scope: this
}
});

me.callParent();
}

below is my json data

{ "menulist": [
{
"xtype" : 'button',
"text": "User",
"action": 'user',
children:[{
"text":'Add me
},{
"text":'delete me'
}]

},
{
"xtype" : 'tbseparator'

},
{
"xtype" : 'button',
"action": 'Order',
"text": "Order",
}

]
}


let me know if any example code available to render Toolbar with menu items using json data

mk.ranjan
19 Nov 2012, 3:42 AM
Hi sorry for bothering you guys,,,, I got it resolved just a minute after posting the Q here.

Here is the solution.... You just need to modify the json data like below:


{ "menulist": [
{
"xtype" : 'button',
"text": "User",
"action": 'user',
menu:[{
"text":'Add me
},{
"text":'delete me'
}]

},
{
"xtype" : 'tbseparator'

},
{
"xtype" : 'button',
"action": 'Order',
"text": "Order",
}

]
}