Add click event to the summary row of grid in extjs

Question

Asked this question yesterday but not getting any response to posting it again in diffrent words-

I have two columns with summary row-

var cols = [
      { id: 'myCol1', header: 'Price1', dataIndex: 'PRICE1', type: 'float', width: 50, summaryType: 'sum' },
      { id: 'myCol2', header: 'Price2', dataIndex: 'PRICE2', type: 'float', width: 50, summaryType: 'sum' },
];

I want to add cellclick event to these summary row so that on click I can open a new window If I use cellclick event of grid, it works for all cells except this summary row.

Is there any other event which I can use so that I would be able to click on it.

UPDATE:

I have used following listener which is not working for summary row

listeners: {
  cellclick: function(grid, rowIndex, cellIndex) {
    // do whatever
  },
  scope: this
}

Answer 1

As far as I know, there's no built-in event for summary row click. What you can do is add a listener to the cell element itself.

You can do that easily by using the delegate option of the listener. But this option is only available for DOM elements events, so we also have to use the element option to hook our event on the grid's body element (alternatively, you can use something like myGrid.getEl().on({ ... })).

Here's an example of listeners that you would add directly to your grid's config:

listeners: {
    scope: this
    ,click: {
        element: 'body'
        // Would have been great to use '.x-grid-row-summary .x-grid-cell',
        // but delegate only accept a *simple selector* which, seemingly,
        // means just one class...
        ,delegate: '.x-grid-cell'
        ,fn: function(e, target) {
            // Remove the condition if you want to catch all cells. You won't
            // have all the arguments that are available in the cellclick
            // event, though.
            if (Ext.fly(target).up('tr').is('.x-grid-row-summary')) {
                // The cellIndex is assigned by the table view when it render the
                // cell element.
                alert('Click on summary cell at index ' + target.cellIndex);
            }
        }
    }
}

Unfortunately, this kind of code relies on class names and the cellIndex property that are set by Ext, and that may change in the future... Keep that in mind when you upgrade the lib!

Answer 2

I am not sure about the code u have used adding event for row click, but still i am adding this code to grid panel hope it helps,sry if u have tried already.. I have edited this below will do i believe..

   listeners: {
      cellclick: function(iView, iCellEl, iColIdx, iRecord, iRowEl, iRowIdx, iEvent) {

            var fieldName = iView.getGridColumns()[iColIdx].dataIndex;
console.log(fieldName );
}
    }