Extjs tree panel not loading json data

Question

Hi I am trying to load data for tree panel through json and
I'm referring this link. tree panel is showing properly except there is no data.

here is my code
Edit updated code as Objectone suggested

Ext.require([
'Ext.tree.*',
'Ext.data.*',
'Ext.tip.*'
]);

Ext.onReady(function() {

var store = Ext.create('Ext.data.TreeStore', {
    proxy: {
        type: 'ajax',
        url: 'treeJson.json'
    },      
    root: {
        expanded: true
    },
    folderSort: true,
    sorters: [{
        property: 'text',
        direction: 'ASC'
    }]
});

var tree = Ext.create('Ext.tree.Panel', {
    store: store,
    renderTo: 'tree-div',
    height: 300,
    width: 250,
    title: 'Files',
    useArrows: true,
    dockedItems: [{
        xtype: 'toolbar',
        items: [{
            text: 'Expand All',
            handler: function(){
                tree.expandAll();
            }
        }, {
            text: 'Collapse All',
            handler: function(){
                tree.collapseAll();
            }
        }]
    }]
});

console.log(store.getRootNode());
});

here is json

[
   {
    "text": "To Do",
    "cls": "folder",
    "expanded": true,
    "children": [
        {
            "text": "Go jogging",
            "leaf": true
        },
        {
            "text": "Take a nap",
            "leaf": true
        },
        {
            "text": "Climb Everest",
            "leaf": true
        }
    ]
}
]

Firebug is showing no error,
Any idea what I'm doing wrong?

Thanks in advance

Kishan, I tried to give id for json but it didn't work, now I removed id from root but it is showing only root. — Sven

objectone objectone · Accepted Answer · 2013-12-04T14:18:55

In you store you are mentioning the root id as src but your json doesn't has the id of src.

In the example link JSON is as below, id is mentioned as "src/fx" where src is the root

{text:fx, id:src/fx, cls:folder, qtip:Type: Folder<br />Last Modified: Jul 9, 2013, 3:24 am}

To get your stuff working just remove the id from root

var store = Ext.create('Ext.data.TreeStore', {
    proxy: {
        type: 'ajax',
        url: 'treeJson.json'
    },      
    root: {
        expanded: true
    },
    folderSort: true,
    sorters: [{
        property: 'text',
        direction: 'ASC'
    }]
});

Extjs tree panel not loading json data

1 Answers