PDA

View Full Version : Menu and SubMenu



AkshayKalbhor
25 Feb 2014, 3:19 AM
Hi,

I am parsing the JSON and populating the menu,
I will just give the detailed introduction with the things done by me,

The model for my menu is :


Ext.define('Menu.model.MenuModel', {
extend: 'Ext.data.Model',
fields: ['id', 'title', 'index', 'iconCls']
});


The store is as follows


Ext.define('Menu.store.MenuStore', {
extend: 'Ext.data.Store',
alias: 'widget.menustore',
id: 'menustoreID',
model: 'Menu.model.MenuModel',

autoLoad: true,
proxy: {
type: 'ajax',
api: {
read: 'data/menuItems.json'
},
reader: {
type: 'json',
root: 'menuItems',
successProperty: 'success'
}
}
});


First, my json did not contain child elements in the menu items.
so the menuItems.json looks like follows.

{ 'success': true,
'menuItems': [
{
'id': '1',
'title': 'CAMPAIGN',
'index': '1',
'iconCls': 'campaign'

}, {
'id': '2',
'title': 'ENQUIRIES',
'index': '2',
'iconCls': 'enquiries'
}
]}



The code on the Menu.js which has the actual logic to display the menu looks as


Ext.define('Menu.view.Menu', {
extend : 'Ext.form.Panel',
alias : 'widget.menuPane',
store : 'MenuStore',
id: 'menuHolder',
cls: 'mymenu',
collapsible : true,

layout: {
type: 'vbox',
align: 'stretch'
},

initComponent : function() {

var store = Ext.getStore('MenuStore');
store.load(function() {
store.each(function(records){
var menuItem = {
xtype: 'button',
cls:'menu-button',
text: records.get('title'),
iconCls: records.get('iconCls'),
scale:'large',
};
Ext.getCmp('menuHolder').insert(menuItem);
});
});
}
});


But now I want to add some child items to the menu item,

The modified menuItems.json looks as follows

{ 'success': true,
'menuItems': [
{
'id': '1',
'title': 'CAMPAIGN',
'index': '1',
'iconCls': 'campaign',
'children': [
{
'id' : '11',
'title': 'child1',
'index': '11',
'iconCls': 'child1'
}, {
'id': '12',
'title': 'child2',
'index': '12',
'iconCls': 'child2'
}, {
'id': '13',
'title': 'child3',
'index': '13',
'iconCls': 'child3'
}
]
},
{
'id': '2',
'title': 'ENQUIRIES',
'index': '2',
'iconCls': 'enquiries',
'children': [
{
'id': '21',
'title': 'child4',
'index': '21',
'iconCls': 'child1'
}, {
'id':'22',
'title': 'child5',
'index': '22',
'iconCls': 'child2'
}, {
'id':'23',
'title': 'child6',
'index': '23',
'iconCls': 'child3'
}
]
}
]
}

Also I did modify the Menu.js view accordingly and is as follows:

The code on the Menu.js which has the actual logic to display the menu looks as


Ext.define('Menu.view.Menu', {
extend : 'Ext.form.Panel',
alias : 'widget.menuPane',
store : 'MenuStore',
id: 'menuHolder',
cls: 'mymenu',
collapsible : true,

layout: {
type: 'vbox',
align: 'stretch'
},

initComponent : function() {

var store = Ext.getStore('MenuStore');
store.load(function() {
store.each(function(records){
var menuItem = {
xtype: 'button',
cls:'menu-button',
text: records.get('title'),
iconCls: records.get('iconCls'),
scale:'large',
menuAlign: 'tr',
showEmptyMenu: true,
menu: [{
text: 'Better'
},{
text: 'Good'
},{
text: 'Best'
}]
};
Ext.getCmp('menuHolder').insert(menuItem);
});
});
}
});



Q1) Is the modified JSON Correctly inserted with child items?
Q2) How do I iterate on the child items and insert them in the menu?
Q3) Is the following model change correct?


Ext.define('Menu.model.MenuModel', {
extend: 'Ext.data.Model',
fields: ['id', 'title', 'index', 'iconCls', 'children[]']
});

mitchellsimoens
3 Mar 2014, 8:08 AM
'children[]' is not a valid name, just 'children' is.

I see you are using xtype : 'button', in a menu it should use menuitem.

AkshayKalbhor
4 Mar 2014, 7:07 AM
Thanks a lot for replying, I will surely try it out.