Escucha de cambio de comprobación de Extjs 3.4 no funciona en la columna de comprobación

Question

El escucha de verificación de cambio para mi checkColumn no está funcionando. ¿Alguna idea de por qué no?

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"); 
     } 

    } 

}); 

Answer 1

En ExtJS 3, el plugin checkcolumn en realidad no utilizar el componente casilla de ExtJS, por lo que los acontecimientos casilla de verificación no están disponibles. La casilla de verificación simplemente es un grid column extendido que ha agregado un procesador personalizado para darle un estilo a la celda como una casilla de verificación.

Por defecto, los únicos eventos se pueden escuchar son eventos de Ext.grid.Column (click, contextmenu, dblclick y mousedown).

This answer to a similar question muestra cómo anular el CheckColumn y agregar los eventos checkchange beforecheckchange &.

Answer 2

En Ext.ux.grid.CheckColumn, añadir este método initialize que se registra un evento checkchange:

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

    this.addEvents(
    'checkchange' 
); 
}, 

Luego, en procesarEvento desencadena el evento:

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); 
    } 
}, 

La resultante El componente CheckColumn debería verse así:

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; 

Answer 3

respuesta simple

casilla Comprobar o desactive cuando el usuario haga clic en la casilla de verificación en extjs 3 rejilla. use esta propiedad en la cuadrícula: =>columnPlugins: [1, 2], Creo que el uso de esta propiedad en su código está gastado perfectamente.

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