選中複選框+網格面板與ExtJS的4

Question

摘要行給出下面的網格面板：

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

請問這個需要進行重構，以總結選擇只有那些行的數據？我知道我可能需要重寫摘要功能的總和功能，但是無法在文檔中找到示例或正確的語法。

謝謝！

這裏是我的一個解決方案，嘗試（貼在煎茶4.x的幫助論壇瓦特/無應答）：

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

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

但這只是正確呈現在最初的渲染，只有當我通過渲染步驟代碼與調試器。在某些種類的情況下，行被渲染而沒有完成計算。

任何想法？我的問題是否過於具體？也許只是編寫我自己的功能並將其添加到Grid Panel的簡單指針。

Answer 1

一點點更新先前的溶液：

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

，然後在網格使用下列行：

summaryType：getSelectedSumFn（ 'D4'，SM）}

Answer 2

來自同事的解決方案：

摘要功能可以將功能作爲summaryType。由於默認情況下，列配置沒有傳遞給此函數，因此您需要定義一個將保留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 
    } 
});