ExtJS 4 - 刷新Grid Panel的摘要功能而不刷新整個視圖

我使用ExtJS的GridPanel庫來呈現具有CheckboxModel選擇的行的列表。還有一個彙總行，將所有選定的數據相加，並將其顯示在GridPanel底部的一行中。這個代碼是：ExtJS 4 - 刷新Grid Panel的摘要功能而不刷新整個視圖

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的複選框選擇時，刷新視圖是我可以找到刷新彙總行的唯一方法。

來源

2011-09-26 Tom Hartwell

在Ext 4.0.2a中沒有對此的支持。網格視圖構建了一個單獨的視圖模板，其特性通過多個定義的鉤子添加或修改該模板。結果是一個無法輕易解析的模板實例。

我發現的最佳解決方案是重建模板片段，該模板片段在模板構建過程中呈現模擬網格視圖正在進行的操作的摘要行。然後用新鮮渲染的版本覆蓋總結行的現有DOM。

我已經創建了一個將refresh（）方法添加到摘要功能的補丁（作爲重寫）。代碼證明是令人驚訝的光滑。

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。

當然這可能會在未來版本的分機中打破。然而，它可能會相當強大，因爲它將大部分工作委託給現有的方法。

來源

2011-09-27 05:26:18 mistaecko

如果您正在使用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);

來源

2012-08-16 21:36:00 Roberto

ExtJS 4 - 刷新Grid Panel的摘要功能而不刷新整個視圖

回答

相關問題