ExtJS 4在网格中显示来自多个数据源的数据

Question

我有两个模型，例如用户和订单

Ext.define('AM.model.User', {
    extend: 'Ext.data.Model',
    fields: ['id', 'username', 'firstName', 'lastName', 'state', 'city'],

    associations: [
    {
            type: 'hasMany', 
            model: 'Order', 
            name: 'orders'
    },],        
});

Ext.define('AM.model.Order', {
    extend: 'Ext.data.Model',
    fields: ['id', 'userId', 'date', 'description', 'value'],    
    belongsTo: 'User',   
});

我正在寻找一种方法来在网格中显示两个商店的数据（所以我的列将是firstName，lastName，orderDate，orderDescription，orderValue等）。

请问有什么适当的方法可以显示它们吗？

谢谢。

- user779612

---

请注意在“associations”和“belongsTo”后面的多余逗号。 - Chau

Answer 1

您应该使用服务器端代码完成此操作，并将所有数据存储在单个存储中。

- Kunal

Answer 2

如果您想使用关联来完成此操作，您需要为网格列定义一个渲染器。
像这样：

{
        text: "orderDescription",
        renderer: function(value,meta,record){//1.
       //var orderStore = record.orderStore;//2a.
       //var orderList = ordersStore.data.items;//2b.
       var orderList = record.orders().data.items; //3.This line is the same as 2 the lines above(2a,2b).
       var order = orderList[0]; //4. TODO..loop through your list. 
       var description = order.data.description; //5. 
       return description ;
 },

我将尝试为任何想这样做的人解释一下。

1. 第三个参数是正在为网格呈现的“User”存储中的当前记录。前两个只需要在那里，以接收记录。省略它们将不起作用。
2. 1a/1b。我把它们留在那里以演示关联如何工作。基本上，“User”存储中的每个记录都有其自己对应的“ordersStore”。它将被称为“ordersStore”，因为您在关联中放入了[name: 'orders']。
3. orders()方法是根据名称“orders”自动创建的。这只返回orderStore。存储库包含一个字段data ->其中包含一个字段items。items是订单的实际列表。
4. 现在您可以访问订单列表。您现在可以循环遍历订单。或者如果您只有一个订单，就只有第一个订单。
5. 您的order再次包含一个字段data，其中包含您的实际数据。

- Renato H.

---

请注意，orders()方法不仅返回Orders记录的存储库，而且它会自动过滤以仅包括与您定义的关联匹配的订单。换句话说，当记录是用户时，并且您调用record.orders()时，您将获得一个存储库，其中仅包括该特定用户的订单，而不是Order存储库中的每个订单。 - Miles

我也质疑返回的存储是否像答案所示那样是预加载的。在我的项目中，我必须在获取存储后进行加载，以获取相关的数据记录。 - Miles

这取决于你如何加载数据。当你加载一个用户并在JSON结果中包含用户的订单时，相关数据已经被加载。否则，你必须手动加载相关订单。 - Renato H.

Answer 3

让我们以以下示例进行尝试 -

步骤1：从店铺2添加记录到店铺2。

var store2 = new Ext.data.Store({
  ...
});
var store1 = new Ext.data.Store({
  ...
  listeners: {
    load: function(store) {
      store2.addRecords({records: store.getRange()},{add: true});
    }
  }
});

第二步：使用存储2中的记录与存储1一起使用。

例如，第一个数据列来自存储1，存储2中的数据形成第2列和第3列。如果“其他”列只是“查找”数据，则可以使用渲染器在第二个存储中查找数据，例如：

var store1 = new Ext.data.Store({
    ...,
    fields: ['field1', 'field2']
});

var store2 = new Ext.data.Store({
    ...
    id: 'field2',
    fields: ['field2', 'fieldA', 'fieldB']
});

var renderA = function(value) {
    var rec = store2.getById(value);
    return rec ? rec.get('fieldA') : '';
}
var renderB = function(value) {
    var rec = store2.getById(value);
    return rec ? rec.get('fieldB') : '';
}

var columns = [
    {header: 'Field 1', dataIndex: 'field1'},
    {header: 'Field A', dataIndex: 'field2', renderer: renderA},
    {header: 'Field B', dataIndex: 'field2', renderer: renderB}
];

祝你好运。

参考来源于此处

- Sajib Hassan