如何加载具有多个根元素的 json 存储？答案

【问题标题】：How to load json store with multiple root elements?如何加载具有多个根元素的 json 存储？
【发布时间】：2013-01-05 08:27:58
【问题描述】：

在我的一个项目中，我需要使用 JSOn 服务器响应加载 Json 存储，如下所示。在 JSON 响应中，我得到 2-3 个根元素。但在商店配置中，我只能提供 1 个根元素。

{
    {"level2List":[{id:'id1', name:'sample'},....]},
    {"level3List":[{id:'id1', name:'sample'},....]},
    {"level4List":[{id:'id1', name:'sample'},....]}
}

我的商店配置如下。

store = new Ext.data.JsonStore({
// store configs
storeId: 'myStore',
proxy: {
    type: 'ajax',
    url: 'xml/getKpiInputData.json',
    reader: {
        type: 'json',
        root: 'level3List',
        idProperty: 'name'
    }
},
fields: [
        {name: 'name'},
        {name: 'id'},
       ...
    ],
remoteFilter: false,
remoteSort: true,
    pageSize: 10,
autoLoad: {start: 0, limit: 10}
 });

如果我给出 1 个根元素（例如 level3List），它会正确加载相应的项目。但我需要从多个根元素加载数据的解决方案。请帮助我将数据加载到商店。

【问题讨论】：

这来自 sencha touch 论坛。也许它会有所帮助sencha.com/forum/…
Evan 上面的回答也适用于我测试的 Ext 3.4.0。

标签： json extjs jsonstore

【解决方案1】：

如果你使用的是 4.x，root 参数可以是一个函数：

Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: ['name']
});

Ext.require('*');

Ext.onReady(function(){

    var store = new Ext.data.Store({
        model: MyModel,
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: function(o){
                    var out = [];
                    return out.concat(o.root1, o.root2, o.root3);
                }
            }
        },
        data: {
            root1: [{
                name: 'Item 1'
            }],
            root2: [{
                name: 'Item 2'
            }],
            root3: [{
                name: 'Item 3'
            }]
        }
    });

    store.load();
    console.log(store.getCount());
});

【讨论】：