PDA

View Full Version : Menu items from JSON



prd
20 Nov 2010, 10:41 AM
Hi,

I am new to extJS, and I am looking for a way to create a menu from JSON data. For example


[
{"id": "file", "name": "File", "sub": [
{"id": "open", "name": "Open"},
{"id": "save", "name": "Save Data"}
]},
{"id": "edit", "name": "Edit", "sub": [
{"id": "edit", "name": "Edit Data"},
{"id": "update", "name": "Update data"}
]}
]

I want to create a menu from that JSON data. All I found is how to create a tree from JSON, but not menu.
Is there a way to create that data into menu?

Thank you

mitchellsimoens
20 Nov 2010, 1:42 PM
JSON is just Javascript Array and Objects. You should see that the curly brackets " { } " denote that it's an Object while the brackets " [ ] " denote that it's an Array. With JSONLint.com your JSON string looks like this:


[
{
"id": "file",
"name": "File",
"sub": [
{
"id": "open",
"name": "Open"
},
{
"id": "save",
"name": "Save Data"
}
]
},
{
"id": "edit",
"name": "Edit",
"sub": [
{
"id": "edit",
"name": "Edit Data"
},
{
"id": "update",
"name": "Update data"
}
]
}
]

So now can you build the menu based on know that this is just Objects within Arrays?

prd
20 Nov 2010, 5:59 PM
I am sorry, but I don't understand. I know about JSON is objects and array, but how can I use that to create menu on extJS's menu object? Is there any way I can import it as extJS menu items? Or, perhaps, where should I insert the object? And in what kind of format so that extJS menu could create a menu based on it?
Or should I write my own function to insert the items to extJS' menu?

Screamy
22 Nov 2010, 9:14 AM
AFAIK, there's no native facility for creating a menu structure from JSON. If you look in the User Extensions forum, you may find something there.

It may be considered a little bit clunky, but you could build the complete JSON for a toolbar with menu layout serverside, based on your security roles. Then use Panel.load({url: '/serverside/url/for/menus.action', method: 'POST', params: {bar: 'foo'}}) in the north region of your Viewport.

prd
22 Nov 2010, 6:37 PM
AFAIK, there's no native facility for creating a menu structure from JSON. If you look in the User Extensions forum, you may find something there.

It may be considered a little bit clunky, but you could build the complete JSON for a toolbar with menu layout serverside, based on your security roles. Then use Panel.load({url: '/serverside/url/for/menus.action', method: 'POST', params: {bar: 'foo'}}) in the north region of your Viewport.
I see.. thanks a lot for your answer :D

Condor
23 Nov 2010, 5:11 AM
You'll have to do that by hand, e.g.

var menu = new Ext.menu.Menu({
items: []
});
function getMenuItems(data) {
var items = [];
for (var i = 0; i < data.length; i++) {
var item = {
text: data[i].name;
}
if (data[i].sub) {
item.menu = {
items: getMenuItems(data[i].sub)
};
}
items.push(menu);
}
return items;
}
Ext.Ajax.request({
url: 'someurl',
success: function(response){
var data = Ext.decode(response.responseText);
var items = getMenuItems(data);
menu.add.apply(menu, items);
menu.doLayout();
}
});