I'm define my tree store as:
Ext.define('Portal.store.GroupsTreeStore', {
extend: 'Ext.data.TreeStore',
model: 'Portal.model.GroupTreeModel',
autoLoad: false,
proxy: {
method: 'get',
type: 'ajax',
url: 'groups/get',
reader: {
type: 'json',
successProperty: 'success',
messageProperty: 'message',
root: 'data'
}
},
// Prevent auto loading
root: {
expanded: true,
text: "",
"data": []
}
});
my model as:
Ext.define('Portal.model.GroupTreeModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'type', type: 'string'}
]
});
I recieve JSON data like:
{
"success": true,
"message": "ok",
"data": [{
"name": "group1",
"type": "group",
"expanded": true,
"children": [{
"name": "admin_2503",
"type": "people",
"leaf": true
},
{
"name": "u1",
"type": "people",
"leaf": true
},
{
"name": "u2",
"type": "people",
"leaf": true
}]
},
{
"name": "group2",
"type": "group",
"expanded": false,
"leaf": false,
"children": [{
"name": "u5",
"type": "people",
"leaf": true
}]
}]
}
I want to load all my tree store data at once and after work with it locally (e.g. search, filter and so on), but with this store config all nodes shows unexpanded and on expand action perform query to provided url: groups\get
with node id, recieve the same JSON and add group1
and group2
as node child's. How should I configure my store for this purpose?
UPDATE Definition of view:
Ext.define('Portal.view.GroupsTree', {
extend: 'Ext.tree.Panel',
store: 'GroupsTreeStore',
border: false,
emptyText: 'No records found',
multiSelect: false,
rootVisible: false,
columns: [
{
xtype: 'treecolumn',
dataIndex: 'name',
flex: 1,
sortable: true,
text: 'Name'
}
],
initComponent: function () {
this.callParent(arguments);
}
});