View Full Version : Loading a tree store from another store i.e. already populated

5 Apr 2012, 6:32 AM
Hi All,

I am using ExtJS 4.0.7.
I want to load a tree store from a normal data store.
The data store gets populated via JSON .
on its successful load i want to load the tree store.
How do i do that?

Thanks in advance

5 Apr 2012, 2:08 PM
This will depend on your data structure for each.
To populate the treestore, the return data will need leaf/text.

You can copy data from one store to another using:

// main app store
var mainStore = new Ext.data.Store({

// loader store for new data; append records to main
var loadStore = new Ext.data.Store({
listeners: {
'load': function(store, records, successful) {
mainStore.loadData(records,true); // append records to main


6 Apr 2012, 6:16 AM
May be i should put forward an example.

following is my Store that gets populated on my page load.
Note that the field treeDataObject(in the model below) is formatted object to populate the tree store.

Ext.define('sampleModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'field1', type: 'String'},
{name: 'field2', type: 'String'},
{name: 'field3', type: 'String'},
{name: 'treeDataObject'}

var myStore =Ext.create (http://docs.sencha.com/ext-js/4-0/#!/api/Ext-method-create)('Ext.data.Store (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store)',{
url :'/data.json',

Now on some event i want to populate my TreeStore from the treeDataObject given in the model above.
This treeDataObject is already in format to populate the tree store. I just need to pick it from there and populate my treestore.

My tree store is some what like

Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'string'},
{name: 'text', type: 'string'},
{name: 'leaf', type: 'boolean'},
{name: 'expanded', type: 'boolean'},
{name: 'children'}
var myTreeStore = Ext.create('Ext.data.TreeStore', {
model: 'Task'

Can we do that?

6 Apr 2012, 5:41 PM
Perhaps something like: (untested)

// listener on mystore
listeners: {
load: function(store,records,successful){ // records loaded; lets begin
Ext.each(records, function(record) { // cylcle record
var treeData = Ext.JSON.decode(record.data.treeDataObject); // convert to object
myTreeStore.loadData(treeData,true); // populate tree store with object; already formatted; true to append; we are in loop


10 Apr 2012, 2:21 AM
Thanks for the suggestion Scott but that does not works for me.
May be i am doing something wrong.

Found a workaround but i feel its a little cranky.

idName: myStore.getAt(0).get('treeDataObject')[0].id,
text: myStore.getAt(0).get('treeDataObject')[0].text,
leaf: myStore.getAt(0).get('treeDataObject')[0].leaf,
expanded: myStore.getAt(0).get('treeDataObject')[0].expanded,
children: myStore.getAt(0).get('treeDataObject')[0].children

10 Apr 2012, 2:23 AM
In the process of this all i encountered a probable bug.

Whenever i use removeAll() it gives me error on account of URL.
Allthough i am not using any url to load the tree store.Neither have i defined any such proxy.
Is it compulsary to have a url. Cant i load store from some local data?

11 Apr 2012, 5:23 AM
At last i have found an easier and simpler way of loading the TreeStore with another store.
As i am getting the proper format data in 'treeDataObject' of SampleModel i just need to do this:-

Ext.create('Ext.tree.Panel', {
rootVisible: false,
root: {
expanded: true,
text: 'Root',
children: treeDataObject


Thats all.

Anyways, thanks for the suggestions everyone.