Extjs 3.4 Checkchange Listener가 Checkcolumn에서 작동하지 않습니다.

Question

내 checkColumn에 대한 checkchange listener가 작동하지 않습니다. 어떤 아이디어가 좋을까요?

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 & checkchange 이벤트를 추가하는 방법을 보여줍니다. 이어서

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

    this.addEvents(
    'checkchange' 
); 
}, 

이벤트 발생의 processEvent에서 : 생성을

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

을

Ext.ux.grid.CheckColumn에서

Answer 2

하는 checkchange 이벤트 등록이 초기화 수단을 추가 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], 코드에서이 속성을 사용하는 것이 완벽하게 보장됩니다.

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