CODEWITHSUNDEEP
extjscheckboxgridextjs3
pm13
pm13

Reputation: 745

Extjs 3.4 checkchange listener not working on Checkcolumn

The checkchange listener for my checkColumn is not working. Any ideas why not?

var checked = new Ext.grid.CheckColumn({
  header: 'Test',
  dataIndex: 'condition',
  renderer: function(v,p,record){
        var content = record.data['info'];      
        if(content == 'True'){
              p.css += ' x-grid3-check-col-td'; 
            return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
        }

  },    
  listeners:{
        checkchange: function(column, recordIndex, checked){
              alert("checked");
        }

  }

});

Upvotes: 5

Views: 4764

Answers (3)

Anil kumar
Anil kumar

Reputation: 101

Simple Answer

Check box check or uncheck when user click on check box in extjs 3 grid. use this property in grid: => columnPlugins: [1, 2], I belive this property use in your code is wornig perfectly.

xtype:grid,
columnPlugins: [1, 2],

Upvotes: 0

sveilleux2
sveilleux2

Reputation: 1512

In Ext.ux.grid.CheckColumn, add this initialize method that register a checkchange event:

initComponent: function(){
  Ext.ux.grid.CheckColumn.superclass.initComponent.call(this);

  this.addEvents(
    'checkchange'
  );
},

Then in processEvent fire the event:

processEvent : function(name, e, grid, rowIndex, colIndex){
  if (name == 'mousedown') {
    var record = grid.store.getAt(rowIndex);
    record.set(this.dataIndex, !record.data[this.dataIndex]);

    // Fire checkchange event
    this.fireEvent('checkchange', this, record.data[this.dataIndex]);

    return false; // Cancel row selection.
  } else {
    return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments);
  }
},

The resulting CheckColumn component should look like this:

  Ext.ns('Ext.ux.grid');

  Ext.ux.grid.CheckColumn = Ext.extend(Ext.grid.Column, {
    // private
    initComponent: function(){
      Ext.ux.grid.CheckColumn.superclass.initComponent.call(this);

      this.addEvents(
        'checkchange'
      );
    },

    processEvent : function(name, e, grid, rowIndex, colIndex){
      if (name == 'mousedown') {
        var record = grid.store.getAt(rowIndex);
        record.set(this.dataIndex, !record.data[this.dataIndex]);

        this.fireEvent('checkchange', this, record.data[this.dataIndex]);

        return false; // Cancel row selection.
      } else {
        return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments);
      }
    },

    renderer : function(v, p, record){
      p.css += ' x-grid3-check-col-td'; 
      return String.format('<div class="x-grid3-check-col{0}">&#160;</div>', v ? '-on' : '');
    },

    // Deprecate use as a plugin. Remove in 4.0
    init: Ext.emptyFn
  });

  // register ptype. Deprecate. Remove in 4.0
  Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);

  // backwards compat. Remove in 4.0
  Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;

  // register Column xtype
  Ext.grid.Column.types.checkcolumn = Ext.ux.grid.CheckColumn;

Upvotes: 1

Greg McGrath
Greg McGrath

Reputation: 537

In ExtJS 3, the checkcolumn plugin does not actually use ExtJS's checkbox component, so checkbox events are not available. The checkcolumn is simply an extended grid column that has added a custom renderer to style the cell like a checkbox.

By default, the only events you can listen to are Ext.grid.Column's events (click, contextmenu, dblclick, and mousedown).

This answer to a similar question shows how to override the CheckColumn and add the beforecheckchange & checkchange events.

Upvotes: 0

Related Questions