title: Checkbox Selection + Grid Panel with Summary Row in ExtJS 4
body: <p>given the following Grid Panel:</p>
  
  <pre><code>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
          }
      });
  });
  </code></pre>
  
  <p>How does this need to be refactored to summarize the data of only those rows that are selected? I know that I probably need to override the sum function of the Summary Feature, but haven't been able to find an example or proper syntax in the docs.</p>
  
  <p>Thanks!</p>
  
  <p>Here was my attempt at a solution (posted on the Sencha 4.x help forum w/ no responses):</p>
  
  <pre><code>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 &lt; length; ++i) {
              comp = Ext.getCmp(columns[i].id);
              val = 0;
              for(j = 0, numRecs = selectedRecords.items.length; j &lt; 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;
      }
  });
  </code></pre>
  
  <p>But this only renders correctly on initial render and only renders when I step through the code with a debugger. There's some kind of race condition where the row gets rendered without the calculations being completed.</p>
  
  <p>Any ideas? Is my question too specific? Perhaps just simple pointers on writing my own feature and adding it to a Grid Panel.</p>