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

我正在尝试学习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']
});

{ 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 '-';
  }
},

---

有关分组标题，请参见以下示例：

这将允许您创建类似于所需的标题（我认为）

至于将两个数据存储合并为一个存储，虽然在您的情况下这是可能的，但我不推荐（目前）。您只需对属于其他存储的列使用自定义渲染器函数即可。大概是这样的：

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

{ 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 '-';
  }
},

---

你需要进行网格内编辑吗？像行编辑或单元格编辑？不，它需要定期刷新数据，但这并不难编码！那就容易了。我会在稍后发布一个答案！非常感谢你！刚开始学习类似的东西是非常困难的，因为文档的大小，简单的函数会丢失！一旦你了解了他们，事情就简单多了！是的。您正在尝试完成的任务非常有趣，在您完成它之后，您将对该框架感到更加舒适。我认为这是任务的重点！我现在觉得应该将第二个文件拆分为两个模型，以保持数据的独立性，然后在网格中将其全部拉到一起！