ExtJS4 How to set TreePanels root node from JSON - json

Question

I want to create TreePanel using ExtJS4. So I'm sending JSON to proxy reader which has following format
{
"text": "en",
"children": {
"text": "/",
"children": [{
"text": "/page",
"children": [{
"text": "/page/new",
"children": [],
"leaf": true,
"expanded": false
},
{
"text": "/page/remove",
"children": [],
"leaf": true,
"expanded": false
}
],
"leaf": false,
"expanded": false
},
{
"text": "/home",
"children": [],
"leaf": true,
"expanded": false
}
],
"leaf": false,
"expanded": true
}
}
How do I have to configure my Store if I want en node to be my root node.
Ext.define('Example.store.WebItems', {
extend: 'Ext.data.TreeStore',
model: 'Example.model.Item',
proxy: {
type: 'ajax',
api: {
read: 'some/url',
},
reader: {
type: 'json',
root: 'children' // Is this correct?
}
},
root: // What should I write here?
});
When I define TreeStore's root as root: 'My Root' it will add new root, but I want to use root defined in JSON.
So my questions are:
How to use root node from JSON instead of defining it manualy?
Do I have to define root node in proxy reader and TreeStore as well?

Answer 1

Response has to have root.
For example:
{
MyRoot: {
"text": "en",
"children": {
"text": "/",
"children": [{
"text": "/page",
"children": [{
"text": "/page/new",
"children": [],
"leaf": true,
"expanded": false
}, {
"text": "/page/remove",
"children": [],
"leaf": true,
"expanded": false
}],
"leaf": false,
"expanded": false
}, {
"text": "/home",
"children": [],
"leaf": true,
"expanded": false
}],
"leaf": false,
"expanded": true
}
}
}
In this example root is MyRoot. Now you have to "tell" reader that your root is MyRoot:
// ...
reader: {
type: 'json',
root: 'MyRoot'
}
},
//root: this config is not needed now
});

Answer 2

As per I know, you need to specify root as following:
root: {
text: 'en',
id: 'src',
expanded: true '
}
Try the above code snippet it will help you.

Answer 3

May be late but for others , wrap the JSON inside array [] just like this :
[{
"text": "en",
"children": {
"text": "/",
"children": [{
"text": "/page",
"children": [{
"text": "/page/new",
"children": [],
"leaf": true,
"expanded": false
}, {
"text": "/page/remove",
"children": [],
"leaf": true,
"expanded": false
}],
"leaf": false,
"expanded": false
}, {
"text": "/home",
"children": [],
"leaf": true,
"expanded": false
}],
"leaf": false,
"expanded": true
}
}]
Remove the reader block
reader: {
type: 'json',
root: 'MyRoot'
}
Add root block :
root: {
text: 'en',
id: 'src',
expanded: true '
}
Add rootVisible: false in treepanel.