javascript ExtJS 4 中带有摘要行的复选框选择 + 网格面板

Checkbox Selection + Grid Panel with Summary Row in ExtJS 4

提问by Tom Hartwell

given the following Grid Panel:

给定以下网格面板：

Ext.onReady(function() {


    var sm = new Ext.selection.CheckboxModel( {
        listeners:{
            selectionchange: function(selectionModel, selected, options){
                // Bunch of code to update store
            }
        }
    });

    var grid = Ext.create('Ext.grid.Panel', {
        features: [{
            ftype: 'summary'
        }],
        store: store,
        defaults: {               // defaults are applied to items, not the container
            sortable:true
        },
        selModel: sm,
        columns: [
            {header: 'Column 1', flex: 1, dataIndex: 'd1', summaryRenderer: function(value, summaryData, dataIndex) { return "Selected Data"} },
            {header: 'C2', width: 150, dataIndex: 'd2', summaryType: 'sum'},
            {header: 'C3', width: 150, dataIndex: 'd3', renderer: dRenderer, summaryType: 'sum'},
            {header: 'C4', width: 150, dataIndex: 'd4', renderer: dRenderer, summaryType: 'sum'},
            {header: 'C5', width: 150, renderer: total, summaryRenderer: grandTotal}
        ],
        width: "100%",
        title: 'Grid',
        renderTo: 'grid',
        viewConfig: {
            stripeRows: true
        }
    });
});

How does this need to be refactored to summarize the data of only those rows that are selected? I know that I probably need to override the sum function of the Summary Feature, but haven't been able to find an example or proper syntax in the docs.

这需要如何重构以仅汇总选定行的数据？我知道我可能需要覆盖摘要功能的 sum 函数，但无法在文档中找到示例或正确的语法。

Thanks!

谢谢！

Here was my attempt at a solution (posted on the Sencha 4.x help forum w/ no responses):

这是我对解决方案的尝试（发布在 Sencha 4.x 帮助论坛上，没有回复）：

Ext.define('Ext.grid.feature.SelectedSummary', {
    extend: 'Ext.grid.feature.Summary',
    alias: 'feature.selectsummary',
    generateSummaryData: function(){
        var me = this,
            data = {},
            store = me.view.store,
            selectedRecords = me.view.selModel.selected,
            columns = me.view.headerCt.getColumnsForTpl(),
            i = 0,
            length = columns.length,
            fieldData,
            key,
            comp;

        for (i = 0, length = columns.length; i < length; ++i) {
            comp = Ext.getCmp(columns[i].id);
            val = 0;
            for(j = 0, numRecs = selectedRecords.items.length; j < numRecs; j++ ) {
                field = columns[i].dataIndex;
                rec = selectedRecords.items[j];
                console.log(rec.get(field));
                val += rec.get(field);
            }
            data[comp.dataIndex] = val;//me.getSummary(store, comp.summaryType, comp.dataIndex, false);
        }
        return data;
    }
});

But this only renders correctly on initial render and only renders when I step through the code with a debugger. There's some kind of race condition where the row gets rendered without the calculations being completed.

但这仅在初始渲染时正确渲染，并且仅在我使用调试器单步执行代码时才渲染。存在某种竞争条件，即在没有完成计算的情况下渲染行。

Any ideas? Is my question too specific? Perhaps just simple pointers on writing my own feature and adding it to a Grid Panel.

有任何想法吗？我的问题是不是太具体了？也许只是关于编写我自己的功能并将其添加到网格面板的简单指示。

采纳答案by Dace Zarina

A little bit updated previous solution:

稍微更新了以前的解决方案：

    var sm = new Ext.selection.CheckboxModel({
        listeners: {
            selectionchange: function (selectionModel, selected, options) {
                // Must refresh the view after every selection
                selectionModel.view.refresh();
            }
        }
    });

    var getSelectedSumFn = function (column, selModel) {
        return function () {
            var records = selModel.getSelection(),
            result = 0;
            Ext.each(records, function (record) {
                result += record.get(column) * 1;
            });
            return result;
        };
    };

and then in grid use following line:

然后在网格中使用以下行：

summaryType: getSelectedSumFn('d4', sm)}

摘要类型：getSelectedSumFn('d4', sm)}

回答by Tom Hartwell

Solution from a colleague:

同事的解决方案：

The summary feature has the capability to take a function as the summaryType. Because the column config does not get passed to this function by default you need to define a closure that will hold on to the dataIndex.

摘要功能可以将函数作为摘要类型。由于默认情况下列配置不会传递给此函数，因此您需要定义一个将保留数据索引的闭包。

var sm = new Ext.selection.CheckboxModel( {
    listeners:{
        selectionchange: function(selectionModel, selected, options){
            // Must refresh the view after every selection
            myGrid.getView().refresh();
            // other code for this listener
        }
    }
});

var getSelectedSumFn = function(column){
    return function(){
        var records = myGrid.getSelectionModel().getSelection(),
        result  = 0;
        Ext.each(records, function(record){
            result += record.get(column) * 1;
        });
        return result;
    };
}
// create the Grid
var myGrid = Ext.create('Ext.grid.Panel', {
    autoScroll:true,
    features: [{
        ftype: 'summary'
    }],
    store: myStore,
    defaults: {               // defaults are applied to items, not the container
        sortable:true
    },
    selModel: sm,
    columns: [
        {header: 'h0', flex: 1, dataIndex: 'groupValue'},
        {header: 'h1', width: 150, dataIndex: 'd1', summaryType: getSelectedSumFn('d1')},
        {header: 'h2', width: 150, dataIndex: 'd2', renderer: r, summaryType: getSelectedSumFn('d2')},
        {header: 'h3', width: 150, dataIndex: 'd3', renderer: r, summaryType: getSelectedSumFn('d3')},
        {header: 'h4', width: 150, dataIndex: 'd4', renderer: r, summaryType: getSelectedSumFn('d4')}
    ],
    width: "100%",
    height: "300",
    title: 'Data',
    renderTo: 'data',
    viewConfig: {
        stripeRows: true
    }
});