Extjs 3.4 listchange listener che non funziona su Checkcolumn

Question

Il listener checkchange per my checkColumn non funziona. Qualche idea, perché 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

In ExtJS 3, il plugin checkcolumn in realtà non utilizzare il componente casella di ExtJS, quindi gli eventi casella di controllo non sono disponibili. Il checkcolumn è semplicemente un esteso grid column che ha aggiunto un renderer personalizzato per modellare la cella come una casella di controllo.

Per impostazione predefinita, gli unici eventi è possibile ascoltare sono gli eventi di Ext.grid.Column (click, contextmenu, dblclick e mousedown).

This answer to a similar question mostra come sovrascrivere CheckColumn e aggiungere gli eventi di scambio di controllo beforecheckchange &.

Answer 2

In Ext.ux.grid.CheckColumn, aggiungere questo metodo initialize che registrare un evento checkchange:

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

    this.addEvents(
    'checkchange' 
); 
}, 

Poi nel processEvent genera l'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 risultante Il componente CheckColumn dovrebbe apparire così:

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

semplice risposta

Casella di selezionare o deselezionare quando l'utente clicca sulla casella di controllo in ExtJS 3 griglia. usa questa proprietà nella griglia: =>columnPlugins: [1, 2], Credo che questo uso della proprietà nel tuo codice sia perfetto.

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