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
}

wat have u tried and share some code regarding that to help u.. — codebreaker, Nov 29 '13 at 10:15

score 2 · Accepted Answer · answered Nov 29 '13 at 11:11

2

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!

answered Nov 29 '13 at 11:11

rixo

23,815
4
63
68

Like in Ext 2.3.0?? That's very probable that this code won't work with this version... I've tested it against 4.2.0. You should explicit the version in the question or tag. You can try with `Ext.get` instead of `fly `, but I fear that won't be enough; the markup and/or listener options may have changed as well. – rixo Nov 29 '13 at 11:58
I came up with this- `if (Ext.fly(e.target).up('tr').is('.x-grid-row-summary'))` But this is always false even if I click on summary row. – Microsoft DN Nov 29 '13 at 12:15
I can't find the docs for the summary in 2.3, but I guess the CSS classes would rather be 'x-grid3-summary-row' and 'x-grid3-cell'. – rixo Nov 29 '13 at 12:21
What extension/plugin are you using for the summary? If you can setup a working [fiddle](https://fiddle.sencha.com), I think I'll be able to work out a solution. – rixo Nov 29 '13 at 12:36
I have removed the condition `if (Ext.fly(target).up('tr').is('.x-grid-row-summary'))` so that it will catch all the cells. But now I am unable to get rowIndex, colIndex and the clicked row data. `target.cellIndex` or `e.target.cellIndex` does not work in 2.3.0 – Microsoft DN Dec 03 '13 at 12:59
You should be able to get the cell index with the view's `getCellIndex` method, and the row with `findRowIndex`. You can find these methods in the [code of the view class](http://docs.sencha.com/extjs/2.3.0/source/GridView.html#Ext-grid-GridView). From what I see, it should work if you pass `e.target` to them. Once you've got the row index, you can get the record with `grid.getStore().getAt(rowIndex)`. – rixo Dec 03 '13 at 13:39

codebreaker · Answer 2 · 2013-11-29T10:34:11.943

0

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

edited Nov 29 '13 at 10:34

answered Nov 29 '13 at 10:17

codebreaker

1,465
1
12
18

sry did't see that k hv u went to docs..just check this out wil help ...http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.selection.CellModel-event-select – codebreaker Nov 29 '13 at 10:28

Add click event to the summary row of grid in extjs

2 Answers2