最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Checkbox Selection + Grid Panel with Summary Row in ExtJS 4 - Stack Overflow

programmeradmin0浏览0评论

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.

Thanks!

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

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,
            p;

        for (i = 0, length = columns.length; i < length; ++i) {
            p = 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[p.dataIndex] = val;//me.getSummary(store, p.summaryType, p.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 pleted.

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

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.

Thanks!

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

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,
            p;

        for (i = 0, length = columns.length; i < length; ++i) {
            p = 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[p.dataIndex] = val;//me.getSummary(store, p.summaryType, p.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 pleted.

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

Share Improve this question edited Jun 16, 2011 at 16:42 Tom Hartwell asked Jun 9, 2011 at 17:12 Tom HartwellTom Hartwell 6681 gold badge12 silver badges21 bronze badges 0
Add a ment  | 

2 Answers 2

Reset to default 2

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

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

发布评论

评论列表(0)

  1. 暂无评论