ExtJS load nested JSON

Question

I have nested json file. I use it to load treepanel. The problem is: when I load tree, it loads the whole json file.

{
"success": true,
"data": [{
    "id": "A",
    "name": "Parent",
    "data": [{
        "id": "Aa",
        "name": "Child",
        "data": [{
            "id": "Aaa",
            "name": "Grandchild",
            "data": [{
                "id": "Aaaa",
                "name": "Grandgrandchild",
                "leaf": true,

             }]
        }]
    }]
}]
}

So when I load tree all the store is loaded and when I expand folders nothings loads. I want it to work differently. I mean when I load the treepanel, only the first level of store loads, in this example, only parent should load, when I expand Parent folder, then the store loads Child, when I expand Child folder then it loads GrandChild folder. I need this because i have really big nested json file and I can't load it immediately full.

Below is my store:

Ext.define('Values.store.ThisStore', {
extend: 'Ext.data.TreeStore',
model: 'Values.model.Item',

proxy: {
    type: 'rest',
    format: 'json',
    url: 'data/vg1',
    reader: {
        type: 'json',
        root: 'data'
    }
}

});

I know it should be simple to do, but I can't get it how. Looking forward for answers, thanks in advance!

UPDATE

I solved the problem, as I said it was really simple. Thanks "Sreek521" anyway. The main idea was to split one big json to several small jsons. I will show it:

The big json looks that:

{
"success": true,
"data": [{
    "id": "A",
    "name": "Parent",
    "data": [{
        "id": "Aa",
        "name": "Child",
        "data": [{
            "id": "Aaa",
            "name": "Grandchild",
            "data": [{
                "id": "Aaaa",
                "name": "Grandgrandchild",
                "leaf": true,

             }]
        }]
    }]
}]
}

And it loads whole file instantly. but if you split it this way:

root.json

{
    "success": true,
    "data": [{
        "id": "A",
        "name": "Parent"
    }]
}

A.json

{
   "success":true,
    "data": [{
        "id": "Aa",
         "name": "Child",
    }]
}

Aa.json

{
    "success":true,
    "data": [{
        "id": "Aaa",
         "name": "GrandChild",
    }]
}

Aaa.json

{
    "success":true,
    "data": [{
        "id": "Aaaa",
         "name": "GrandgrandChild",
         "leaf": true
    }]
}

Everything works just fine! Hope this problem solution will help others too, because it took me a while to solve it!

Sreek521 Sreek521 · Accepted Answer · 2014-08-21T13:02:09

I tried with your JSON in try.sencha with the following code. It is working as you required.Below is the code.JSOn is your json data.Please check the below

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

Ext.onReady(function() {


    var store = Ext.create('Ext.data.TreeStore', {
        fields:['id','name'],
        proxy: {
            type: 'ajax',
            //the store will get the content from the .json file
            url: 'treegrid.json',
         reader: {
            type: 'json',
            root: 'data'
    }
        }
         });


    var tree = Ext.create('Ext.tree.Panel', {
        title: 'Core Team Projects',
        width: 500,
        height: 300,
        renderTo: Ext.getBody(),
        collapsible: true,
        rootVisible: false,
        store: store,
        singleExpand: true,

        columns: [{
          text: 'Id',
            flex: 1,
            dataIndex: 'id',
            sortable: true
            },{
          text: 'Name',
            flex: 1,
            dataIndex: 'name',
            sortable: true
        }]
     });
});

ExtJS load nested JSON

1 Answers