Bind store data with check tree in Sencha - extjs

Question

I am working with check tree in sencha.
This is my store
Ext.define('crApp.store.modulesStore', {
extend: 'Ext.data.TreeStore',
proxy: {
type: 'memory'
},
model: 'crApp.model.MainTreeModel',
defaultRootProperty: "children",
root: {
expanded: true,
children: [{"text":"Dashboard","moduleId":"1","checked":true,"expanded":true,"children":[{"permission_id":"3","permission_name":"View","text":"Dashboard/View","moduleId":"1_3","checked":false,"leaf":true}]},{"text":"Master","moduleId":"2","checked":true,"expanded":true,"children":[{"text":"Facility","moduleId":"3","checked":true,"expanded":true,"children":[{"permission_id":"1","permission_name":"Create","text":"Facility/Create","moduleId":"3_1","checked":true,"leaf":true},{"permission_id":"2","permission_name":"Edit","text":"Facility/Edit","moduleId":"3_2","checked":true,"leaf":true},{"permission_id":"3","permission_name":"View","text":"Facility/View","moduleId":"3_3","checked":true,"leaf":true},{"permission_id":"4","permission_name":"Delete","text":"Facility/Delete","moduleId":"3_4","checked":true,"leaf":true},{"permission_id":"5","permission_name":"Allocation","text":"Facility/Allocation","moduleId":"3_5","checked":true,"leaf":true}]},{"text":"Marketing","moduleId":"4","checked":true,"expanded":true,"children":[{"permission_id":"1","permission_name":"Create","text":"Marketing/Create","moduleId":"4_1","checked":true,"leaf":true},{"permission_id":"2","permission_name":"Edit","text":"Marketing/Edit","moduleId":"4_2","checked":true,"leaf":true},{"permission_id":"3","permission_name":"View","text":"Marketing/View","moduleId":"4_3","checked":true,"leaf":true},{"permission_id":"4","permission_name":"Delete","text":"Marketing/Delete","moduleId":"4_4","checked":true,"leaf":true}]},{"text":"Department","moduleId":"5","checked":true,"expanded":true,"children":[{"permission_id":"1","permission_name":"Create","text":"Department/Create","moduleId":"5_1","checked":true,"leaf":true},{"permission_id":"2","permission_name":"Edit","text":"Department/Edit","moduleId":"5_2","checked":true,"leaf":true},{"permission_id":"3","permission_name":"View","text":"Department/View","moduleId":"5_3","checked":true,"leaf":true},{"permission_id":"4","permission_name":"Delete","text":"Department/Delete","moduleId":"5_4","checked":true,"leaf":true}]},{"text":"User","moduleId":"6","checked":true,"expanded":true,"children":[{"permission_id":"1","permission_name":"Create","text":"User/Create","moduleId":"6_1","checked":true,"leaf":true},{"permission_id":"2","permission_name":"Edit","text":"User/Edit","moduleId":"6_2","checked":true,"leaf":true},{"permission_id":"3","permission_name":"View","text":"User/View","moduleId":"6_3","checked":true,"leaf":true},{"permission_id":"4","permission_name":"Delete","text":"User/Delete","moduleId":"6_4","checked":true,"leaf":true}]},{"text":"Doctor","moduleId":"7","checked":true,"expanded":true,"children":[{"permission_id":"1","permission_name":"Create","text":"Doctor/Create","moduleId":"7_1","checked":true,"leaf":true},{"permission_id":"2","permission_name":"Edit","text":"Doctor/Edit","moduleId":"7_2","checked":true,"leaf":true},{"permission_id":"3","permission_name":"View","text":"Doctor/View","moduleId":"7_3","checked":true,"leaf":true},{"permission_id":"4","permission_name":"Delete","text":"Doctor/Delete","moduleId":"7_4","checked":true,"leaf":true}]}]}]
}
});
When I use the static data, its working perfectly. The data is coming from php url : http://192.168.1.100:8088/CRApp/yii/web/module/index
How can I set the ajax url in store, so that view can access the data dynamically.
I tried this:
proxy: {
type: 'ajax',
url: 'http://192.168.1.100:8088/CRApp/yii/web/module/tree',
reader: {
type: 'json',
expanded: true,
root: 'children'
}
},
but its not working properly. Any solution?

Answer 1

Ext.define('AppName.store.settings.permissions.GroupPermissionsStore', {
extend: 'Ext.data.TreeStore',
alias: 'store.groupPermissionsStore',
autoLoad: true,
storeId: 'groupPermissionsStore',
load : function (options) {
var successFunction = function (response) {
var grpStore = Ext.data.StoreManager.get('groupPermissionsStore');
var resp = Ext.JSON.decode(response.responseText);
grpStore.setRoot(test);
}
};
//Make ajax call with above function as success function
Ext.Ajax.request({
url: "http://192.168.1.100:8088/CRApp/yii/web/module/index",
cors: true,
async: calltype,
withCredentials: true,
//jsonData: dataPayload,
method: 'POST',
success: successFunction,
failure: function (err) {
//Call back if the ajax call fails
}
});
}
});
Key change for Tree Store is method "setRoot" rather and load data.
For "Ext.data.StoreManager.get('groupPermissionsStore')" to work, the store has be added to stores array in the application's "app.js" file.