Unable to create ExtJS tree from json - extjs

Question

I am trying to create a tree from json file. The JSON data is:
[
{
"root": {
"text": "Root Node",
"expanded": true,
"children": [
{
"text": "Invisible",
"leaf": true,
"children": [
{
"text": "Bookmark 2",
"leaf": true
},
{
"text": "Bookmark 3",
"leaf": true
}
]
},
{
"text": "Visible",
"leaf": true,
"children": [
{
"text": "Bookmark 4",
"leaf": true
},
{
"text": "Bookmark 5",
"leaf": true
}
]
}
]
}
}
]
Here is the code I am using for my store:
Ext.define('DHT.store.Categories', {
extend: 'Ext.data.TreeStore',
model: 'DHT.model.Category',
autoLoad: true,
autoSync: true,
proxy: {
type: 'ajax',
url: 'treedata.json',
reader:
{
type: 'json'
}
}
});
and here is the code for tree:
Ext.define('DHT.view.Category.CategoryList', {
extend: 'Ext.tree.Panel',
alias: 'widget.treeList',
width: 200,
height: 400,
store: Ext.create('DHT.store.Categories'),
rootVisible: false
});
The above code is only showing folder image that keep on expanding! Can someone point out the problem?

Answer 1

You have leaf: true and children, this is not possible
{
"text": "Invisible",
"leaf": true,
"children": [
{
"text": "Bookmark 2",
"leaf": true
},
...
]
}
correct:
{
"text": "Invisible",
"leaf": false,
"children": [
{
"text": "Bookmark 2",
"leaf": true
},
...
]
}
You have to define a root property in your treestore
The root property needs to be consistent, in your case it would be 'root', 'children', 'children'
Read this: Treepanel with nested data from JSON