PDA

View Full Version : Problem with Tree Store & Tree panel



suryanarendra
16 Apr 2012, 12:08 PM
Hi,

I am trying to load data into Tree store from JSON response and show it on Tree panel.
But only root is getting displayed and all child elements are not getting loaded into Tree panel.

Please find code samples below..

ArrayView.js
------------------


Ext.define(ArrayView', {
extend:'Ext.panel.Panel',
layout:{
type:'border'
},
title:'Arrays',
initComponent:function () {
var me = this;
Ext.applyIf(me, {
items:[
{
xtype:'treepanel',
width:'15%',
region:'west',
store: 'ArrayHierarchyStore', rootVisible:false
},
{
xtype:'tabpanel', activeTab:0, region:'center', width:'85%',
items:[
{
xtype:'panel'
//dimensions defined
},
{
xtype:'panel'
//dimensions defined
},
{
xtype:'panel'
//dimensions defined
},
{
xtype:'panel'
//dimensions defined
}
]
}
]
});


me.callParent(arguments);
}
});



ArrayHierarchyStore.js
-------------------------------


Ext.define('ArrayHierarchyStore', {
extend:'Ext.data.TreeStore',
fields: [
'id', 'text','expanded','leaf','children'
],
proxy: {
type: 'ajax',
api: {
read : '/portal/inventory/san/arraysview.json'
},
reader: {
type: 'json',
totalProperty: 'total',
successProperty: 'success',
root:'data'
},
listeners: {
exception:
function(proxy, response, operation) {
Ext.MessageBox.show({ title:
'REMOTE EXCEPTION', msg: operation.getError(), icon:
Ext.MessageBox.ERROR, buttons: Ext.Msg.OK });
}
},
remoteFilter: true
});


ArrayController.js
-----------------------


Ext.define('ArrayController', {
extend: 'Ext.app.Controller',
views: ['ArrayView'],
stores: ['ArrayHierarchyStore'],
init: function() {
this.control({
});
}
});



JSON response:
--------------------


{

"success": true,
"data": [

{

"id": 0,
"text": "test",
"expanded": "true",
"leaf": "false",
"children": [

{

"id": 1,
"text": "cas",
"expanded": "true",
"leaf": "false",
"children": [

{

"id": 2,
"text": "T1",
"expanded": "true",
"leaf": "false",
"children": [ ]
},
{

"id": 3,
"text": "T2",
"expanded": "true",
"leaf": "false",
"children": [

{

"id": 4,
"text": "05515-cas",
"expanded": "true",
"leaf": "true",
"children": [ ]
}
]
}
]
},
{

"id": 5,
"text": "sag",
"expanded": "true",
"leaf": "false",
"children": [

{

"id": 6,
"text": "T1",
"expanded": "true",
"leaf": "false",
"children": [

{

"id": 8,
"text": "03315-SAG",
"expanded": "true",
"leaf": "true",
"children": [ ]
}
]
},
{

"id": 7,
"text": "T2",
"expanded": "true",
"leaf": "false",
"children": [ ]
}
]
}
]
}
],
"total": 1
}



I expected it to print

-> CAS
............... -> T1
................-> T2
.........................-> 05515-was
-> SAG
................-> T1
.........................-> 03315-SAG
................-> T2

but it is only printing only "test " and all its children "CAS" and "SAG" are not getting displayed.
I am not able to see any error in Fire bug console.

Please help me to resolve this problem.

Thanks,
Nari.

vietits
16 Apr 2012, 4:55 PM
You have set root to 'data', so you should use this name in your hierachical data instead of 'children'


{
"success": true,
"data": [{
"id": 0,
"text": "test",
"expanded": "true",
"leaf": "false",
"data": [{
"id": 1,
"text": "cas",
"expanded": "true",
"leaf": "false",
"data": [{
"id": 2,
"text": "T1",
"expanded": "true",
"leaf": "false",
"data": [ ]
},{
"id": 3,
"text": "T2",
"expanded": "true",
"leaf": "false",
"data": [{
"id": 4,
"text": "05515-cas",
"expanded": "true",
"leaf": "true",
"data": [ ]
...
"total": 1
}

suryanarendra
16 Apr 2012, 5:09 PM
It worked... Thank you. :)