Ext JS 4: grid - some action on itemclick and different action when clicked on action column

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.

score 7 · Accepted Answer · edited May 23 '17 at 11:45

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

timidboy · Answer 2 · 2012-09-03T06:27:02.607

0

Have you tried Ext.EventObject#stopPropagation() or Ext.EventObject#stopEvent()?

You can add it inside your action colum handler:

e.stopPropagation();

This way the grid's itemclick event won't trigger.

edited Sep 03 '12 at 06:27

answered Sep 03 '12 at 05:37

timidboy

1,702
1
16
27

Thank you but this does not seem to be working. I tried e.stopPropagation(), e.prevendDefault(), e.stopEvent(). I guess am doing something wrong: handler: function(grid, rowIndex, colIndex, act, e) { e.stopPropagation(); } – HonzaBé Sep 03 '12 at 09:13
Based on the order these events get fired this may never work. But I don't know the order, so it's just a guess. @honzzz Maybe you can store the rowclick as deferred handler so that it can be canceled by the button handler. – sra Sep 03 '12 at 09:32
1

How about checking the columIndex: `if (columnIndex != actionColumnIndex) { ... }` – timidboy Sep 03 '12 at 10:02

score 0 · Answer 3 · answered Sep 01 '14 at 12:11

A more direct answer to your question, without having to change event type, would be:

grid.on('itemclick', function(grid, rowIndex, columnIndex, e) {
  var columnType = grid.panel.columns[columnIndex].xtype;
  if (columnType === 'actioncolumn') {
    // it's action column!
  } else {
    // it's NOT action column!
  }
}, this);

Ext JS 4: grid - some action on itemclick and different action when clicked on action column

3 Answers3