Extjs 3.4 checkchange監聽器無法工作在Checkcolumn上

checkColumn的checkchange監聽器不工作。任何想法爲什麼不呢？Extjs 3.4 checkchange監聽器無法工作在Checkcolumn上

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

    } 

});

來源

2012-09-12 pm13

這個checkColumn是什麼？ ExtJs 3.4中沒有這樣的API！你有沒有擴展任何其他的API來創建這個checkColumn API？ – AJJ

這是一個插件，自EXTJS 2 – pm13

在ExtJS 3中，checkcolumn插件實際上並未使用ExtJS的複選框組件，所以複選框事件不可用。該檢查列僅僅是一個擴展的grid column，它添加了一個自定義渲染器來像複選框一樣對單元格進行樣式設置。

默認情況下，你可以聽的唯一事件是Ext.grid.Column的事件（click，contextmenu，dblclick和mousedown）。

This answer to a similar question顯示如何覆蓋CheckColumn並添加beforecheckchange & checkchange事件。

來源

2015-02-12 14:19:34

在Ext.ux.grid.CheckColumn，添加註冊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); 
    } 
},

將所得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;

來源

2016-01-07 15:18:12 sveilleux2

簡單的答案

複選框選中或取消時，用戶點擊在ExtJS的複選框3格。在網格中使用這個屬性：=>columnPlugins: [1, 2], 我相信這個屬性在你的代碼中使用是完美的。

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

來源

2016-07-04 12:19:00

開始提供，請檢查並更新 –

Extjs 3.4 checkchange監聽器無法工作在Checkcolumn上

回答

相關問題