Trapping click events in ExtJS Summary feature

Trapping click events fired from the summary feature in ExtJS 4.2 is rather difficult. These events are not fired like normal cell click events because the summary feature is outside the grid view.

This means the feature doesn't play nice with some of the other plugins and grid features and you must manually do the work. I ended up extending the feature into a new feature: clickablesummary.

Ext.define('Mancini.extension.grid.feature.ClickableSummary', {
  extend: 'Ext.grid.feature.Summary',
  alias: ['feature.clickablesummary'],
	
  mixins: {
    observable: 'Ext.util.Observable'
  },
	
  relayedEvents: [
    'summaryclick'
  ],
	
  constructor: function(config) {
    var me = this;
    me.addEvents(
      'summaryclick'
   );
		
    me.callParent(arguments);
    me.mixins.observable.constructor.call(me);
  },
	
  init: function(grid) {
	  var me = this;
		
	  // wire click event to dom cell click           
    grid.on({
      afterrender: function () {
        this.mon(this.el, 'click', me.onSummaryCellClick, me, { delegate: '.x-grid-cell' });
      }                
    });
		
    grid.relayEvents(me, me.relayedEvents);        
    me.callParent(arguments); 
	},
	
  onSummaryCellClick: function (e, target) {            
    var me = this,
        cell = Ext.get(target),
        row = cell.up(me.summaryRowSelector);
        
    // only execute if this was inside summary row
    // as mentioned in init, there may be a cleaner way to implement this
    if (row) {                
      var grid = Ext.getCmp(cell.up('.x-grid').id),
          column = grid.columns[cell.dom.cellIndex],
          record = me.summaryRecord,
		  cellIndex = cell.dom.cellIndex,
		  rowIndex = -1;				
          
      me.fireEvent('summaryclick', me, cell, cellIndex, record, row, rowIndex, e);
    }
  },          
	
	renderTFoot: function(values, out) {
    var view = values.view,
        me = view.findFeature('clickablesummary');
 
    if (me.showSummaryRow) {
      out.push('<tfoot>');
      me.outputSummaryRecord(me.createSummaryRecord(view), values, out);
      out.push('</tfoot>');
    }
  }	
});

GIT Gist

This code uses relayed events to send events as if they are part of the grid. This means that consumers can monitor the grid for events from the summary. It creates a new event, summaryclick, that fires when a summary cell is clicked.

It traps the event by monitoring for DOM click events fired from the grid. When a click happens it checks if the event fired from a cell in the summary row. If it did, it will dispatch the new summaryclick event.

To see a full working example, check out this fiddle.

I have another extension of this feature that adds cell editing into the summary feature. I'll save that for another article!