PDA

View Full Version : tree menu not display children



bigvillager
3 Aug 2012, 5:08 AM
I want to create tree menu dynamically, but tree menu display only one item. its id is 6 and its label_en is User Management, what is wrong this code ?

Thanks

this is server response (json)
{
"root_node": [
{
"id": 6,
"label_tr": "Kullanıcı Yönetimi",
"label_en": "User Management",
"children": [
{
"id": 7,
"label_tr": "Web Kullanıcısı Yönetimi",
"label_en": "Web User Managemenet",
"children": [
{
"id": 8,
"label_tr": "Rol Tanımlama",
"label_en": "Role Definition",
"menuLink": "/link",
"children": [

]
},
{
"id": 9,
"label_tr": "Kullanıcı Tanımlama",
"label_en": "User Definition",
"menuLink": "/link",
"children": [

]
}
]
}
]
}
],
"success": true
}
---------------------------------------------------------------------------------------------------------
this is extjs code


Ext.define('TreeModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id' },
{ name: 'label_tr'},
{ name: 'label_en' },
{ name: 'menuLink' },
{ name: 'children' }
]
});


var userTreeStore = Ext.create('Ext.data.TreeStore', {

model:'TreeModel',

proxy: {
type: 'ajax', // Because it's a cross-domain request
url: 'buildMenu.html',
reader: {
type: 'json',
root: 'root_node' // The returned JSON will have array
// of users under a "root_node" property
}
},
listeners: {

append: function( thisNode, newChildNode, index, eOpts ) {

if( !newChildNode.isRoot() ) {

newChildNode.set('leaf', true);
newChildNode.set('text', newChildNode.get('label_tr'));
newChildNode.set('children', newChildNode.get('children'));
}
}
}
});

userTreeStore.setRootNode({
text: 'Menu',
leaf: false,
expanded: false // If this were true, the store would load itself
// immediately; we do NOT want that to happen
});


var tree = Ext.create('Ext.tree.Panel', {
store: userTreeStore,
rootVisible: true,
useArrows: true,
frame: true,
title: 'Menu',
width: 300,
height:450
});

scottmartin
8 Aug 2012, 10:05 AM
Please see the file: treegrid.json in your /examples/tree directory for properly formatting your tree data. You can use the treegrid.js as a reference as well.

Scott.

bigvillager
8 Aug 2012, 10:45 PM
thanks scott, I use treegrid and it is solved.