Blog Archive

ExtJs 4 capture checkcolumn change event in Grid whether checked or unchecked ?

Lets say you have defined a Grid Panel with checkcolumn as shown below
// create the grid
var grid = Ext.create('Ext.grid.Panel', {
    ...
    columns: [{
           text: 'Foo',
           ...
        },{
           xtype: 'checkcolumn',
           text: 'Active?',
           dataIndex: 'status',
           width: 55
        }
    ]
    ...
});

You have to listen for the checkchange event to capture the checkbox selection !

checkchange( Ext.ux.CheckColumn this, Number rowIndex, Boolean checked, Object eOpts )
Fires when the checked state of a row changes

Parameters
  • this : Ext.ux.CheckColumn
  • rowIndex : Number
    • The row index
  • checked : Boolean
    • True if the box is checked
  • eOpts : Object
    • The options object passed to Ext.util.Observable.addListener.

Source code snippet from the controller

init : function() {
  this.control({
     
   ...
   'checkcolumn': {
    checkchange: this.checkboxChanged
   }
     
  });
 },

 checkboxChanged : function(column,rowIndex,checked) {
  console.log('Checkbox changed');
  //grid column information
  console.log(column);
  //grid row number
  console.log(rowIndex);
  //the checkbox value
  console.log(checked);
 }