Load treegrid data dyanamically from a json property file in extjs - extjs

Question

Treegrid is not getting rendered properly. Here is the code:
treeGrid.js :
Ext.define('App.view.DBStatusGrid', {
extend : 'Ext.container.Container',
xtype : 'app-DB-grid',
layout : 'vbox',
items : [
{
xtype : 'container',
cls : 'boxTitle',
html : 'DB Details'
},
{
xtype : 'treepanel',
singleExpand: true,
useArrows:true,
rootVisible:false,
columns: [
{text: 'Server Status', dataIndex: 'serverStatus' , width: 80,},
{ xtype: 'treecolumn',text: 'Server Name', dataIndex: 'serverName' , width: 140},
{ text: 'Instance Status', align:'center', dataIndex: 'instanceStatus',width: 80,},
{text: 'Instance Name', align:'center', dataIndex: 'instanceName',width: 140}
]
}
]
});
property.json :
"data":[
{
"serverStatus": "active",
"serverName":"rg0C1",
"iconCls":"task-folder",
"expanded":false,
"data": [
{
"instanceStatus": "active",
"instanceName":"OA1",
"leaf":true,
"iconCls":"no-icon"
}
]
}
]
Creating store
Ext.define('App.view.InnerContainerView', {
extend : 'Ext.container.Container',
xtype : 'app-inner-ContainerView',
config : {
component : 'NONE',
parentView : ''
},
initComponent : function() {
var parentView = this.getParentView();
this.items = [
{
xtype : 'container',
layout: 'card',
items : [
{
xtype: 'app-DB-grid',
parentView: parentView,
listeners :{
render : function(){
var store = Ext.create('Ext.data.TreeStore',
{
model: 'App.model.treeModel',
autoLoad: true,
proxy: {
type: 'ajax',
url:'app/data/property.json',
reader: {
type: 'json',
root : 'data'
}
},
root :{
expanded :true
}
});
this.down('treepanel').setRootNode(store.getRootNode()); // I am getting my treegrid,and setting the rootnode.
}
]
}
]
this.callParent();
});
My Problem :
From the json property file,only serverName is getting displayed in the treegrid.When I try to expand the serverName,it is not getting expanded.Please help me resolve this issue.Please point me to the correct direction if I am going wrong somewhere.Any help would be appreciated.Thanks.

Answer 1

What about having the store available before the component is created?
Ext.widget({
renderTo: Ext.getBody(),
xtype : 'treepanel',
singleExpand: true,
useArrows:true,
rootVisible:false,
columns: [
{text: 'Server Status', dataIndex: 'serverStatus' , width: 80,},
{xtype: 'treecolumn',text: 'Server Name', dataIndex: 'serverName' , width: 140},
{text: 'Instance Status', align:'center', dataIndex: 'instanceStatus',width: 80,},
{text: 'Instance Name', align:'center', dataIndex: 'instanceName',width: 140}
]
,store: Ext.create('Ext.data.TreeStore', {
model: 'App.model.treeModel',
autoLoad: true,
proxy: {
type: 'ajax',
url:'property.json',
reader: {
type: 'json',
root : 'data'
}
},
root :{
expanded :true
}
})
});
I assumed from the presence of the xtype that you didn't define a class for that component, but that could also be done:
Ext.define('My.TreePanel', {
extend: 'Ext.tree.Panel',
singleExpand: true,
useArrows:true,
rootVisible:false,
columns: [
{text: 'Server Status', dataIndex: 'serverStatus' , width: 80,},
{xtype: 'treecolumn',text: 'Server Name', dataIndex: 'serverName' , width: 140},
{text: 'Instance Status', align:'center', dataIndex: 'instanceStatus',width: 80,},
{text: 'Instance Name', align:'center', dataIndex: 'instanceName',width: 140}
]
// Providing only configuration (as opposed to a store instance) in order for
// each tree to have its own store instance
,store: {
model: 'App.model.treeModel',
autoLoad: true,
proxy: {
type: 'ajax',
url:'property.json',
reader: {
type: 'json',
root : 'data'
}
},
root :{
expanded :true
}
}
});
Ext.create('My.TreePanel', {
renderTo: Ext.getBody()
});
Or this way, that would allow us to be more dynamic with the store creation:
Ext.define('My.TreePanel', {
extend: 'Ext.tree.Panel',
singleExpand: true,
useArrows:true,
rootVisible:false,
columns: [
{text: 'Server Status', dataIndex: 'serverStatus' , width: 80,},
{xtype: 'treecolumn',text: 'Server Name', dataIndex: 'serverName' , width: 140},
{text: 'Instance Status', align:'center', dataIndex: 'instanceStatus',width: 80,},
{text: 'Instance Name', align:'center', dataIndex: 'instanceName',width: 140}
]
,initComponent: function() {
// Creating store instance myself at creation time
this.store = Ext.create('Ext.data.TreeStore', {
model: 'App.model.treeModel',
autoLoad: true,
proxy: {
type: 'ajax',
url:'property.json',
reader: {
type: 'json',
root : 'data'
}
},
root :{
expanded :true
}
});
// Don't forget to call the superclass method!
this.callParent(arguments);
}
});
Ext.create('My.TreePanel', {
renderTo: Ext.getBody()
});