CODEWITHSUNDEEP
javascriptjsonextjsextjs4
Sven
Sven

Reputation: 303

Extjs tree panel not loading json data

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

Upvotes: 1

Views: 2690

Answers (1)

objectone
objectone

Reputation: 224

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'
    }]
});

Upvotes: 2

Related Questions