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

在Ext.ux.grid.CheckColumn中，添加这个注册checkchange事件的initialize方法：

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;

Answer 2

在ExtJS 3中，checkcolumn插件实际上并不使用ExtJS的复选框组件，因此复选框事件不可用。 checkcolumn只是一个扩展的grid column，它添加了一个自定义渲染器来为单元格设置样式，如复选框。

默认情况下，您可以收听的唯一事件是Ext.grid.Column的事件（click，contextmenu，dblclick和mousedown）。

This answer to a similar question显示了如何覆盖CheckColumn并添加beforecheckchange＆amp; checkchange事件。

Answer 3

简单回答

复选框选中或取消选中用户单击extjs 3网格中的复选框。在grid：=＆gt;中使用此属性columnPlugins: [1, 2], 我相信这个属性在你的代码中使用是完美的。

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

Extjs 3.4 checkchange监听器不在Checkcolumn上工作

3 个答案: