ExtJS加载嵌套的JSON

Question

我有嵌套的json文件。 我用它来加载treepanel。 问题是：当我加载树时，它会加载整个json文件。

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

             }]
        }]
    }]
}]
}

因此，当我加载树时，将存储所有存储，而当我展开文件夹时，将不加载任何内容。 我希望它的工作方式有所不同。 我的意思是，当我加载树面板时，只有第一级存储加载，在此示例中，只有父级加载，当我展开“父”文件夹时，存储又加载了“子级”，当我扩展“子级”文件夹时，它加载了GrandChild文件夹。 我需要这个，因为我有一个很大的嵌套json文件，我无法立即将其完全加载。

以下是我的商店：

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'
    }
}

}）;

我知道这应该很简单，但是我不知道怎么做。 期待答案，在此先感谢！

UPDATE

我已经解决了这个问题，正如我所说的那样，这非常简单。 还是谢谢“ Sreek521”。 主要思想是将一个大json拆分为几个小json。 我将展示它：

大json看起来：

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

             }]
        }]
    }]
}]
}

并立即加载整个文件。 但是如果以这种方式拆分它：

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

一切正常！ 希望这个问题解决方案也能对其他人有所帮助，因为我花了一些时间来解决它！

Answer 1

我尝试使用以下代码在try.sencha中使用您的JSON。 它可以按您的要求工作，下面是代码，JSOn是您的json数据，请检查以下内容

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