extjs4 - Unable to create ExtJS tree from json

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

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
           },
           ...
       ]
   }
   

2. You have to define a root property in your treestore

3. The root property needs to be consistent, in your case it would be 'root', 'children', 'children'
   Read this: Treepanel with nested data from JSON