PDA

View Full Version : TreeStore - eager and lazy loading of children



MichaelEr
2 Jan 2012, 7:25 AM
Hi,

I just want to create a tree which is created from a Json object. The tree contains children elements, but when expanding the element a remote request is executed with the root node as argument. Why is there a remote request if the children are already loaded?



{"tree":
{
"children":[
{
"children":[
{
"id":"1",
"text":"child1",
"leaf":true
}
],
"id":"foo",
"text":"ChildWithLoadedChildren",
"leaf":false
},
{
"id":"bar",
"text":"ChildWithUnloadedChildren",
"leaf":true
}],
"id":"foo",
"text":"root",
"expanded":true,
"leaf":false
}
}


Regards
Michael

mitchellsimoens
2 Jan 2012, 7:27 AM
Is your TreeStore setup correctly? When it is loaded, have you checked to see if it is loaded?

MichaelEr
2 Jan 2012, 7:47 AM
Hi,
thanks for the reply. That's my tree store configuration:


Ext.define('Foo.store.ProjectOverview', {
extend : 'Ext.data.TreeStore',
requires : 'Foo.model.ProjectOverview',
model : 'Foo.model.ProjectOverview',
autoLoad : true,

proxy : {
type : 'ajax',
url : '/my-webapp/rest/tree/foo',
reader : {
type : 'json',
root : 'tree'
}
},
root : {
text : 'tree',
id : 'tree',
expanded : true
}
});

Thats the model configuration:


Ext.define('Foo.model.ProjectOverview', {
extend : 'Ext.data.Model',
fields : [ {
name : 'id',
type : 'string'
}, {
name : 'text',
type : 'string'
}, {
name : 'leaf',
type : 'boolean'
}]
});


I can't see any misconfiguration because the root node is rendered successfully.

Regards
Michael

MichaelEr
2 Jan 2012, 5:20 PM
I'm still looking for a reason for the remote requests. To eleminate other errors, I removed the autoLoad and proxy property and replaced the root property configuration with a copy paste model from the json server response (I removed the root node "tree") and it works as expected.

How to verify that the TreeStore is loaded successfully (isn't a successfully loaded root node enough)?

Regards
Michael

skirtle
2 Jan 2012, 10:28 PM
Loading nodes remotely is a pain.

First, don't try to load the root node remotely. Always configure it on the TreeStore. If you need to load it remotely then fake it: use a hidden root on the store and add your desired root as a single child of the actual root.

Next problem. The root config of a reader doesn't do what you might expect for a TreeStore. By default it has the value children and it is used to identify the property that contains the child nodes. Given your data, this means you shouldn't be specifying it.

If you can then change the format of your data instead. Make sure the outermost node is just an array of children (possibly just a single child if you're faking a root node) and that all of its children are accessible via the children property.

If you really don't want to change your server's response format then you'll have to override getResponseData on the Json reader instead to implement the reader 'root' config option yourself. There are a number of threads that discuss this, including:

http://www.sencha.com/forum/showthread.php?163081

MichaelEr
3 Jan 2012, 5:37 AM
Hi,

Thanks for your reply, and the good advice. I only had to replace the root node "tree" with an array and it works now.

Regards
Michael

ju187
15 Feb 2012, 9:11 PM
I have a similar problem. Could you show me what do you mean by "change the root tree to an array"? Thanks.

MichaelEr
16 Feb 2012, 2:11 AM
Instead of returning a single node with children, I wrapped the single root node in a JSON array, so instead of returning "{ myrootnode .. children : [..] }", I return "[ { myrootnode .. children : [..] ..}]"

Regards
Michael

sivaramaiah.dulla
13 Aug 2014, 7:52 AM
Please provide a sample JSON tree and also the Tree store to load the json dynamically,