Question

I have a grid and I need clickable rows – a new window should be opened when a row is clicked. But I would like to add an action column with delete icon which would delete the row on click. The problem is that when the icon in the action column is clicked the action related to the row is also triggered and the new window is opened. I need to find a way how to trigger one action when action column is clicked and another action when the rest of the row is clicked. Any ideas please?

Maybe something like following pseudo-code:

grid.on('itemclick', function(grid, rowIndex, columnIndex, e) {
    if (action column clicked) { // do something }
    else { // do something else }
}, this);

… but how do I detect that the action column was clicked?
Thank you.

Answer 1

Instead of this:

grid.on('itemclick', function(grid, rowIndex, columnIndex, e) {
    if (action column clicked) { // do something }
    else { // do something else }
}, this);

Use this:

grid.getView().on('cellmousedown',function(view, cell, cellIdx, record, row, rowIdx, eOpts){
    //itemclick logic
});

This event does not get fired in case of an actioncolumn. So you don’t need an if - else

Looks like this event is undocumented, but there is a private method in the docs here

Reference: ExtJS 4 – Grid – Disable rowselection for specific column