javascript - Extjs 平均存储所有字段

Question

我有一个像下面这样的商店

Ext.define('Result', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'state', type: 'string', mapping:0 },
        { name: 'product', type: 'string', mapping:1 },
        { name: 'quantity', type: 'int', mapping:2 }
        { name: 'price', type: 'int', mapping:3 }
    ]
});
var store = Ext.create('Ext.data.ArrayStore', {
    model: 'Result',
    groupField: 'state',
    data: [
        ['MO','Product 1',50,40],
        ['MO','Product 2',75,50],
        ['MO','Product 3',25,60],
        ['MO','Product 4',125,70],
        ['CA','Product 1',50,50],
        ['CA','Product 2',100,40],
        ['WY','Product 1',250,40],
        ['WY','Product 2',25,50],
        ['WY','Product 3',125,86],
        ['WY','Product 4',175,83]
    ]
});

我想计算每个状态组的数量和价格的平均值并将其显示到网格中。我在 sencha 文档中看到，有一个像 average 的函数( http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.Store-method-average )我可以像这样实现它

store.avarage('quantity', true);

但它只给出了一个字段的平均值。

我如何根据组计算多个字段的平均值并将其显示在网格中。

Answer 1

这将为您提供一个仅包含平均数据的网格:http://jsfiddle.net/Jandalf/Wn4UY/4/

var chartStore = Ext.create('Ext.data.ArrayStore', {
    fields: ['state',  'product', 'quantity', 'price'],
    groupField: 'state',
    data: [
        ['MO','Product 1',50,40],
        ['MO','Product 2',75,50],
        ['MO','Product 3',25,60],
        ['MO','Product 4',125,70],
        ['CA','Product 1',50,50],
        ['CA','Product 2',100,40],
        ['WY','Product 1',250,40],
        ['WY','Product 2',25,50],
        ['WY','Product 3',125,86],
        ['WY','Product 4',175,83]
    ]
});

var data = [];
var quantities = chartStore.average("quantity", true);
var prices = chartStore.average("price", true);
Ext.each(chartStore.collect('state'), function(item){
    data.push({
        state: item,
        quantity: quantities[item],
        price: prices[item]
    });
});

var gridStore = Ext.create('Ext.data.Store', {
    fields: ['state', 'quantity', 'price'],
    groupField: 'state',
    data: data
});

Ext.create('Ext.grid.Panel', {
    renderTo: document.body,
    store: gridStore,
    columns: [
        { dataIndex: 'state', text: 'State' },
        { dataIndex: 'quantity', text: 'Quantity' },
        { dataIndex: 'price', text: 'Price' }
    ]
});

如果您想要一个具有不同分组的图表，您需要一个额外的商店，您不能为一个商店定义 2 个“ View ”。