Geek asks and answers

Checkbox selection + Panel grid with summary row in ExtJS 4

considering 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 should this be reorganized in order to sum the data of only those rows that are selected? I know that I probably need to override the sum function of the resume function, but could not find an example or the correct syntax in the documents.

Thank!

Here is my attempt at a solution (posted on the Sencha 4.x help forum without answers):

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 correctly displays the original render and displays only when passing through the code using the debugger. There is some kind of race condition when the string is obtained without performing calculations.

Any ideas? Is my question too specific? Perhaps just simple pointers to writing my own function and adding it to the grid panel.

+3
2

:

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

:

summaryType: getSelectedSumFn ('d4', sm)}

+1

:

summaryType. , , 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
    }
});
+2

More articles:


All Articles