PDA

View Full Version : Ext.data.TreeStore - fields of root node when loading JSON



igor_tcg
25 Feb 2012, 8:24 PM
Hello,

I am completely new in ExtJS and although I could learn much from tutorials and documentation, I was not able to find answer for my problem.

Before I define my question, please take a look at my model definition:

Ext.define('MyModel', {
extend: 'Ext.data.Model',

fields: [
{name: 'myName', type: 'string'}
]
});

This is very simple model - of course my real life model is a little bit more complicated, but above model is enough to present my question so let's use it.
When initializing my objects I am decorating this model with
Ext.data.NodeInterface.decorate("MyModel");

The general idea is to have some kind of logic tree which holds homogeneous data. This tree is not intended to be displayed in the GUI, it is just to hold data and is used for some kind of processing.
So that I would like to have something like that (as memory data structure):


MyModel [myName='name 1']
|
|----> MyModel [myName='name 1.1']
| |
| |---->MyModel [myName='name 1.1.1']
| |---->MyModel [myName='name 1.1.2']
|
|----> MyModel [myName='name 1.2']
|----> MyModel [myName='name 1.3']

This is not problem to create this structure in memory, but I need to load it from the server. So that I decided to use simple JSON in the first step. Here is my as simple as possible JSON file which I want to load into my model:


{
"myName": "name 1",

"children": [{
"myName": "name 1.1"
}, {
"myName": "name 1.2"
}]
}

Now I created following store:


var store = Ext.create('Ext.data.TreeStore', {
model: "MyModel",
autoLoad: false,
proxy: {
type: 'ajax',
url : '../resources/test_data/TreeStoreTest.json',
reader: {
type: 'json'
}
}
});

Now when I load the data I receive following result:


store.getRootNode().data.myName == '' (I expected 'name 1')
store.getRootNode().childNodes[0].data.myName == 'name 1.1'
store.getRootNode().childNodes[1].data.myName == 'name 1.2'

so I lost "name 1"

If I modify JSON a little bit:


{
"children" : {
"myName": "name 1",

"children": [{
"myName": "name 1.1"
}, {
"myName": "name 1.2"
}]
}
}

I will receive result:

store.getRootNode().data.myName == ''
store.getRootNode().childNodes[0].data.myName == 'name 1'
store.getRootNode().childNodes[0].childNodes[0].data.myName == 'name 1.1'
store.getRootNode().childNodes[0].childNodes[1].data.myName == 'name 1.2'

So nearly what I need, but root node is still not filled, and to get my root of logic data I must get first child of node received from TreeStore as tree node.

I tested various use cases. I tried to define in the store:

reader: {
type: 'json',
root: 'myRoot'
}

with the JSON

{
"root" : {
"myName": "name 1",

"children": [{
"myName": "name 1.1"
}, {
"myName": "name 1.2"
}]
}
}

but the result was:

store.getRootNode().data.myName == ''
store.getRootNode().childNodes[0].data.myName == 'name 1'
store.getRootNode().childNodes[0].data.children - collection of two pure objects (not "MyModel")
store.getRootNode().childNodes[0].childNodes - empty


I tried also to use:

reader: {
type: 'json',
root: 'myRoot',
record: 'children'
}

with above JSON, but the result was even worse

store.getRootNode().data.myName == ''
store.getRootNode().childNodes[0].data.myName == ''
store.getRootNode().childNodes[0].childNodes - empty

I tried various things, I also tried to search over Internet, but I was never able to get the simple situation presented below:


store.getRootNode().data.myName == 'name 1'
store.getRootNode().childNodes[0].data.myName == 'name 1.1'
store.getRootNode().childNodes[1].data.myName == 'name 1.2'

Now I would like to ask you - is it possible with Ext.data.TreeStore?
I know that I can implement additional method which will extract child of root node, but is this the only option to do that? Or perhaps I am using this incorrectly?

vietits
26 Feb 2012, 1:58 AM
With Ext.data.TreeStore, the root node is created by <store>.setRootNode() or by settings its 'root' config which in fact will call <store>.setRootNode(). Your data will be loaded under this root node.

When constructing a Ext.tree.Panel object, if we don't specify a root node for the store and config its rootVisible to false, it will create a default root node for the store.

So in your case, if you want your root node displays with 'name 1', you should do:


var store = Ext.create('Ext.data.TreeStore', {
model: "MyModel",
autoLoad: false,
root: {
myName: 'name 1'
},
proxy: {
type: 'ajax',
url : '../resources/test_data/TreeStoreTest.json',
reader: {
type: 'json'
}
}
});

Your JSON data file


{
"children": [{
"myName": "name 1.1",
leaf: true
}, {
"myName": "name 1.2",
children: []
}]
}

In case you want to construct and show your tree with data loaded from server, you should config your TreePanel with rootVisible set to false. In that case, your JSON data will look like


{
children: {
myName: 'name 1',
children: [{
myName: "name 1.1",
children: []
}, {
myName: "name 1.2",
children: []
}]
}
}