ExtJS 4 - 网格面板的刷新摘要功能，无需刷新整个视图

Question

我正在使用 ExtJS 的 GridPanel 库来呈现具有用于选择的 CheckboxModel 的行列表。还有一个汇总行，用于汇总所有选定的数据并将其显示在 GridPanel 底部的一行中。其代码是：

var sm = Ext.create('Ext.selection.CheckboxModel', {

    /////////
    // With large number of rows ... this takes forever
    /////////
    grid.getView().refresh();
    /////////
    /////////


    listeners:{
        selectionchange: function(selectionModel, selectedRecords, options){
          // Do stuff

        }
    }
});

var selSumFn = function(column, selModel){
    return function(){
        var records = selModel.getSelection(),
        result  = 0;
        //console.log("records:" + records.length);
        Ext.each(records, function(record){
            result += record.get(column) * 1;
        });

        return result;
    };
};

var grid = Ext.create('Ext.grid.Panel', {
    autoScroll:true,
    features: [{
        ftype: 'summary'
    }],
    store: store,
    defaults: {
        sortable:true
    },
    selModel: sm,
    columns: [
        {header: 'Column 1', width: 100, dataIndex: 'col1', summaryType: selSumFn('col1', sm)},
        {header: 'Column 2', width: 100, dataIndex: 'col2', summaryType: selSumFn('col2', sm)}
    ],
    width: 730,
    height: 400 ,
    title: 'Data',
    renderTo: 'data-div',
    viewConfig: {
        stripeRows: true
    },
    listeners: {'beforerender' : {fn:function(){this.store.load();}}}
});

有没有办法只刷新summaryrow功能而不刷新整个视图？当对 GridPanel 的复选框选择进行更新时，刷新视图是我能找到的刷新摘要行的唯一方法。

Answer 1

Ext 4.0.2a 中不支持此功能。网格视图构建单个视图模板，其功能通过多个定义的挂钩添加或修改此模板。结果是一个无法轻易剖析的单个模板实例。

我发现的最佳解决方案是重建模板片段，该片段呈现摘要行，模仿网格视图在模板构建过程中所做的事情。然后用新渲染的版本覆盖摘要行的现有 DOM。

我已经创建了一个补丁（作为替代），它将刷新（）方法添加到摘要功能中。
代码结果出人意料地流畅。

Ext.require('Ext.grid.feature.Summary', function() {
    Ext.override(Ext.grid.feature.Summary, {
        refresh: function() {
            if(this.view.rendered) {
                var tpl = Ext.create(
                            'Ext.XTemplate',
                            '{[this.printSummaryRow()]}',
                            this.getFragmentTpl()
                          );
                tpl.overwrite(this.getRowEl(), {});
            }
        },

        getRowEl: function() {
            return this.view.el.down('tr.x-grid-row-summary');
        }
    });
});

在您的 selectionchange 侦听器中：

selectionchange: function(selectionModel, selectedRecords, options) {
    grid.getView().getFeature(0).refresh();
}

请参阅此 JsFiddle 进行现场演示。

当然，这可能会在 Ext 的未来版本中被破坏。然而，它可能会非常强大，因为它将大部分工作委托给现有方法。

Answer 2

如果您正在使用 GroupingSummary，则需要使用它：

refresh:function(){

    var rowEls = this.view.el.query('tr.x-grid-row-summary');
    var i = 1;
    Ext.Array.each(this.summaryGroups, function(group){

        var tpl = new Ext.XTemplate(
            this.printSummaryRow(i),
            this.getFragmentTpl()
          );

        tpl.overwrite(rowEls[i-1], {})

        i++;
    },this);