ExtJS 4显示网格中多个商店的数据

时间:2011-06-09 11:09:26

标签: extjs grid extjs4

我有2个模型 - 例如 - 用户和订单

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

和他们的商店。我正在寻找一种方法来显示网格中两个商店的数据。 (所以我的专栏会是firstNamelastNameorderDateorderDescriptionorderValue ......

显示它们的正确方法是什么?

感谢。

3 个答案:

答案 0 :(得分:6)

您应该使用服务器端代码执行此操作,并将所有数据放入单个商店中。

答案 1 :(得分:5)

如果要对关联执行此操作,则需要为网格列定义渲染器 像这样:

{
        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. 第三个参数是为网格呈现的“用户”商店中的当前记录。前两个只需要在那里,接收记录。离开它们是行不通的。

  2. 1a / 1b的。我把它留在那里,以证明协会的运作方式。基本上,“用户”商店中的每条记录都有自己相应的“ordersStore”。它将被称为“ordersStore”,因为您放入了关联[name: 'orders']
  3. 同样基于名称“订单”自动创建orders()方法。这只会返回orderStore。商店包含字段data - >其中包含字段itemsitems是实际的订单列表。
  4. 现在您可以访问您的订单列表。您现在可以通过订单循环。或者,如果您只有一个订单,只需要第一个订单。
  5. 您的order再次包含一个字段data,其中包含您的实际数据。

答案 2 :(得分: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:使用商店2与商店1的记录。

例如,第一个数据col来自Store 1,而来自Store 2的数据来自cols 2和3.如果“其他”列只是'lookup',您可以使用在第二个商店中查找数据的渲染器数据,例如:

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}
];

祝你好运。

参考。来自here