ExtJS4 How to set TreePanels root node from JSON
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,
"expan开发者_运维知识库ded": 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?
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
});
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.
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
.
精彩评论