ExtJS 4 - обновление сводной функции панели сетки без обновления всего представления - PullRequest
Новая
       4

ExtJS 4 - обновление сводной функции панели сетки без обновления всего представления

1 голос
/ 27 сентября 2011

Я использую библиотеку 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.

Ответы [ 2 ]

6 голосов
/ 27 сентября 2011

В 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.Однако он может оказаться достаточно надежным, поскольку делегирует большую часть своей работы существующим методам.

0 голосов
/ 17 августа 2012

Если вы используете 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);
...