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()
});