javascript - 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,

             }]
        }]
    }]
}]
}

因此，当我加载树时，所有商店都会加载，而当我展开文件夹时，则不会加载任何内容。 我希望它以不同的方式工作。我的意思是，当我加载树形面板时，仅加载第一级商店，在本例中，仅应加载父级，当我展开父文件夹时，商店加载子级，当我展开子级文件夹时，它加载孙级文件夹。我需要这个，因为我有非常大的嵌套 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
        }]
     });
});