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

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

Answer 1

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

我找到的最佳解决方案是重建模板片段，该模板片段呈现摘要行，模仿网格视图在模板构建过程中所执行的操作。然后使用新呈现的版本覆盖摘要行的现有DOM。

我创建了一个补丁（作为覆盖），它将一个refresh（）方法添加到Summary功能中。代码结果令人惊讶地光滑。

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

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

2 个答案: