Cell Click Events in Ext JS 4

Jan 14th, 2012

Some people may have some issues handling mouse click events on specific cells of a gridpanel. This event was present in ExtJS 3, however documentation in ExtJS 4 only lists container or item click events. Unfortunately an item (row) click event doesn't provide a column index for cell detection.

A quick Google search reveals many workarounds out there, however there is a simple, currently undocumented, listener made exactly for this purpose. It's called cellclick and is applied directly to the grid. While it still fires whenever a row is clicked this time the parameters are different, including a column index number used to detect the specific cell. See below for a list of parameters and quick example.

listeners: {
    cellclick: function(gridView,htmlElement,columnIndex,dataRecord){
        if(columnIndex == 3){
            //Perform action only if column index 3 is clicked
Building Awesome Web Apps
HTML5 WebGL Android Apple iOS Windows Phone Leap Motion PhoneGap Google Glass