How do I get column name from rowselection in an ExtJS grid?

Question

I have a extjs gridpanel setup, and I want to be able to do things based on a user clicking on text or icons in the grid. For example, filter the grid if the user clicks (or double clicks) a word in a column, or show a popup if the user clicks on an icon. I can easily get the row they clicked on, and values by column name from that row, but I don't know which column was clicked.

Alternatively, I could add an onClick to the entire grid, which I could then get the individual text from the row/column, but I don't know what row index or column that value belongs to. I could add a CSS class that would tell me a column name, but that seems like a hack.

Is there anything built-in that can do this?

Answer 1

The "cellclick" event on the grid is the way to go. A function listening on this event gets passed ( Grid this, Number rowIndex, Number columnIndex, Ext.EventObject e ).

If you want to get the text of the gridCell, calling "yourGrid.getView().getCell(rowIndex, colIndex)" will return the DOM element.

If you want to get the column header, call "yourGrid.getColumnModel().getColumnHeader(colIndex)

If you want to find anything else out about a particular column, call "yourGrid.getColumnModel().getColumnAt(colIndex)

Answer 2

Please look at edit-grid.html example for checkbox rendering and event handling.

Answer 3

I think if you are interested in column wise events rowselection is the wrong event to look into. As Joshua suggested the cellclick event will the event you have to look into.

This event can give the dataIndex of the column as given

var fieldName = grid.getColumnModel().getDataIndex(columnIndex);