Extjs 3.4 Checkchange ListenerがCheckcolumnで機能しない

Question

checkColumnのcheckchangeリスナーが機能していません。どんなアイデアでもないのですか？

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

ExtJS 3では、checkcolumnプラグインはExtJSのチェックボックスコンポーネントを実際には使用しないため、チェックボックスイベントは利用できません。 checkcolumnは拡張されたもので、セルをチェックボックスのようにスタイルするためのカスタムレンダラーが追加されています（grid column）。デフォルトでは

、あなたが聞くことができる唯一のイベントはExt.grid.Columnのイベント（click、contextmenu、dblclick、およびmousedown）があります。

This answer to a similar questionは、CheckColumnをオーバーライドしてbeforecheckchange &チェックチェンジイベントを追加する方法を示しています。 Ext.ux.grid.CheckColumnで

Answer 2

、checkchangeイベントを登録し、このinitializeメソッドを追加：のprocessEvent火災に、イベント

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]); 

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

得をCheckColumnコンポーネントは次のようになります。

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

単純な答え

チェックボックスのチェックやユーザーがExtJSに3グリッド内のチェックボックスをクリックすると、チェックを外します。 グリッドでこのプロパティを使用：=>columnPlugins: [1, 2], 私はあなたのコードでこのプロパティの使用は完璧なwornigです。

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