ExtJS 加载嵌套的 JSON

Question

我有嵌套的 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,

             }]
        }]
    }]
}]
}

因此，当我加载树时，所有商店都已加载，而当我展开文件夹时，什么都没有加载。 我希望它以不同的方式工作。我的意思是当我加载树面板时，只加载第一级商店，在这个例子中，只有父级应该加载，当我展开父文件夹时，商店加载子级，当我展开子文件夹时，它加载 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'
    }
}

});

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

更新

我解决了这个问题，正如我所说的，它真的很简单。无论如何感谢“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
        }]
     });
});