Question

我正在尝试学习Ext JS，因为我已经设置了一个项目，需要我知道它的一些基本部分，基本上我被困在以下：

我需要根据公共字段将两个JSON文件加载到同一个表中：

文件1

{
    "data" : [{
        "id" : "12",
        "data" : {
            "field1" : "data 1-1",
            "field2" : "data 1-2",
        }
    },{
        "id" : "34",
        "data" : {
            "field1" : "data 2-1",
            "field2" : "data 2-2",
        }
    }]
}

文件2：

{
    "otherdata" : [{
        "id" : "12",
        "stuff" : {
            "var1" : "stuff 1-1",
            "var2" : "stuff 1-2",
        },
        "morestuff" : {
            "v1" : "more 1-1",
            "v2" : "more 1-2",
            "v3" : "more 1-3"
        }
    },{
        "id" : "34",
        "stuff" : {
            "var1" : "stuff 2-1",
            "var2" : "stuff 2-2",
        },
        "morestuff" : {
            "v1" : "more 2-1",
            "v2" : "more 2-2",
            "v3" : "more 2-3"
        }
    }]
}

我想要解决的是将它们解析成如下表：

|-----------------------------------------------------------------------------------
|    |        data         |          stuff        |           morestuff           |
|-----------------------------------------------------------------------------------
| id |  field1  |  field2  |    var1   |    var2   |    v1    |    v2    |    v3   |
|-----------------------------------------------------------------------------------
| 12 | data 1-1 | data 1-2 | stuff 1-1 | stuff 1-2 | more 1-1 | more 1-2 |more 1-3 |
| 34 | data 2-1 | data 2-2 | stuff 2-1 | stuff 2-2 | more 2-1 | more 2-2 |more 2-3 |
------------------------------------------------------------------------------------

我坚持的是以下内容：

如何加载两个 JSON文件和将它们与公共字段链接到单个数据存储中？

如何在数据模型中创建字段和子字段？（我可以创建单个字段，但无法弄清楚如何在这些字段中创建字段）

我的模特目前看起来像这样：

Ext.define('NS.model.Group', {
    extend: 'Ext.data.Model',
    fields: ['id','field1', 'field2', 'var1', 'var2', 'v1', 'v2', 'v3']
});

Answer 1

对于分组标题，请查看以下示例：http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/group-header-grid.html

这可以让你创建类似于你想要的标题（我认为）。

至于将两个数据存储组合到一个商店中 - 虽然在您的情况下我可能不推荐它（但是）。您可以只为属于其他商店的列使用自定义渲染器功能。像这样：

{ text: 'id', flex: 1, dataIndex: 'id' },
{ text: 'v1', flex: 1, dataIndex: 'id',  
  renderer: function(value) {   
    var st = Ext.getStore('Store2'),
        idx = st.findExact('id', value);
    if (idx >= 0)
      return st.getAt(idx).get('v1');
    else 
      return '-';
  }
},

将多组数据加载到一个表中/在数据模型中创建子字段

1 个答案: