ExtJS 4 - Grid - Disable rowselection for specific column

Question

I have created a grid with extjs 4. The selection.CheckboxModel is implemented to. This means that the row is selected/deselected wherever you click on the particular row. Now i want to disable this selection on the last column since it contains custom buttons. (I don't want to select the row if a button is clicked).

Any idea's how to do this?

Many thanks in advance!

Answer 1

This is actually a tricky little problem, if only because Sencha documentation is lacking.

The CheckboxModel does indeed have a beforeselect event inherited from Ext.selection.RowModel. However, there's no easy way to get the column index because frankly, that's the point of the RowModel.

However, there's an undocumented event in Ext.view.Table (which your grid will inherit) called beforecellmousedown. Here's the event parameters:

1. view: The view of your grid
2. cell: The cell that was clicked
3. cellIndex: Index of the cell
4. record: The store record associated with the cell
5. row: The row of the cell
6. rowIndex: Index of the row
7. eOpts: Standard event option event

So you would probably try something like this:

viewConfig: {
    listeners: {
        beforecellmousedown: function(view, cell, cellIdx, record, row, rowIdx, eOpts){
            if(cellIdx === indexOfLastColumnInGrid){
                return false;
            }
        }
    }
}

Both the cell and row indexes are zero-based.

Answer 2

listeners: {
    beforecellmousedown: function(view, cell, cellIdx, record, row, rowIdx, eOpts) {
        if (String(eOpts.getTarget()) == '[object HTMLButtonElement]') {
            return false;
        }
    }
}

Thanx Eric. This i the final solution!