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,

             }]
        }]
    }]
}]
}

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

}）;

我知道这应该很简单，但我无法理解。期待解答，提前感谢！

更新

我解决了这个问题，因为我说这很简单。谢谢＆＃34; Sreek521＆＃34;无论如何。主要想法是将一个大json分成几个小jsons。我会表明：

大杰森认为：

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

ExtJS加载嵌套的JSON

1 个答案: