I am working on showing JSON data in EXTJS 4 TreePanel. But my tree is not showing any data . Please let me know where I am wrong. Let me post my codes below:
View Part: it has got the treepanel
xtype: 'treepanel',
title: 'Standard Geographies',
height: 250,
width: 310,
store: 'Data',
border: 1,
displayField: 'name',
useArrows: true,
rootVisible: true,
multiSelect: true,
preventHeader: true,
renderTo: Ext.getBody(),
columns: [{
xtype: 'treecolumn',
text: 'Standard Geographies',
flex: 1,
sortable: false,
//renderer : change,
dataIndex: 'name'
}],
Model Part: Using json data
Ext.define('TA.model.TAModel', {
extend: 'Ext.data.Model',
fields: ['name','typeId'],
//fields: ['abbr','type'],['name','typeId']
proxy: {
type: 'ajax',
url : 'data/StandardGeoTree.json',
actionMethods: {
read: 'POST'
},
reader: {
type: 'json',
root: 'geographyOptions'
},
}
});
Store Part: I hope all is ok in the store part
Ext.define('TA.store.Data', {
//extend: 'Ext.data.Store',
//model: 'TA.model.TAModel',
extend: 'Ext.data.TreeStore',
model: 'TA.model.TAModel',
autoSync: true,
autoLoad: true,
listeners: {
load:function(){
console.log('Schemes Data store loaded');
}
},
proxy: {
type: 'ajax',
//url : 'data/StandardGeoTree.json',
api: {
//read: 'data/StandardGeo.json',
read: 'data/StandardGeoTree.json',
//update: 'data/updateTradeArea.json'
},
reader: {
type: 'json',
root: 'root',
successProperty: 'success',
idProperty : 'typeId'
}
},
root : {
text: 'Root',
id: 'typeId',
expanded : true,
loaded : true,
children: []
}
});
JSON
{
"success": true,
"root" : [
{
"name": "001-USA",
"typeId" : "1",
"children":[
{"name": "USA", "typeId" : "1", "leaf":"true"},
{"name": "State", "typeId" : "2", "leaf":"true"},
{"name": "DMA", "typeId" : "3", "leaf":"true"},
{"name": "CSA", "typeId" : "4", "leaf":"true"},
]
}
]
}
the store configuration for tree component is actually doesn't need to be so complicated. for example simple store declaration below is enough:
var treestore = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'data/StandardGeoTree.json'
}
});
then in your tree configuration set store: treestore
and rootVisible: false
finally, the store expect json respond in this format:
[{
"text": "To Do",
"cls": "folder",
"expanded": true,
"children": [{
"text": "Go jogging",
"leaf": true
},{
"text": "Take a nap",
"leaf": true
},{
"text": "Climb Everest",
"leaf": true
}]
}]