ExtJS：整合存储中的记录

Question

考虑一个简单的例子，考虑以下记录存储：

{ item: 'A', group: 'red', quantity: 1 }, 
{ item: 'A', group: 'green', quantity: 1 }, 
{ item: 'B', group: 'red', quantity: 1 }, 
{ item: 'B', group: 'blue', quantity: 1 },
{ item: 'C', group: 'green', quantity: 1 }

我的目标是创建一个网格，其中每个不同的 group 字段作为过滤器，其中所有活动过滤器将 quantity 合并到唯一的 item 中。例子：

// show: red, green          // show: green           // show: red, blue
item | quantity              item | quantity          item | quantity
---------------              ---------------          ---------------
 A   |   2                     A  |   1                 A  |   1
 B   |   1                     C  |   1                 B  |   2
 C   |   1

有没有内置的方法来处理这个问题？我的想法是：

1. 首先在group 上应用文件管理器。然后使用collect 获取所有唯一的item 剩余作为行的基础。对这些项目中的每一项执行find 并将结果的数量相加。
2. 将我的模型重新考虑为：

.

{ 
    item: 'A', quantities: [
        { group: 'red', quantity: 1 }, { group: 'green', quantity: 2 }
    ]
}

想法？

Answer 1

ExtJS 网格有一个开箱即用的分组视图，可能非常适合您正在做的事情。

docs 的设置是这样的：

var store = Ext.create('Ext.data.Store', {
    storeId:'employeeStore',
    fields:['name', 'seniority', 'department'],
    groupField: 'department',
    data: {'employees':[
        { "name": "Michael Scott",  "seniority": 7, "department": "Management" },
        { "name": "Dwight Schrute", "seniority": 2, "department": "Sales" },
        { "name": "Jim Halpert",    "seniority": 3, "department": "Sales" },
        { "name": "Kevin Malone",   "seniority": 4, "department": "Accounting" },
        { "name": "Angela Martin",  "seniority": 5, "department": "Accounting" }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'employees'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Employees',
    store: Ext.data.StoreManager.lookup('employeeStore'),
    columns: [
        { text: 'Name',     dataIndex: 'name' },
        { text: 'Seniority', dataIndex: 'seniority' }
    ],

   features: [{ftype:'grouping'}],

    width: 200,
    height: 275,
    renderTo: Ext.getBody()
});

总体上看一下 Sencha 网页上的示例，它会给你很多关于如何设计你的组件和它们背后的代码的有用的想法。