Extjs 3.4 checkchange 监听器在 Checkcolumn 上不起作用

Posted 2023-02-26

【中文标题】Extjs 3.4 checkchange 监听器在 Checkcolumn 上不起作用

【英文标题】：Extjs 3.4 checkchange listener not working on Checkcolumn

【发布时间】：2012-09-12 14:40:25

【问题描述】：

我的 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");
        

  

);

【问题讨论】：

这个checkColumn是什么？ ExtJs 3.4 中没有这样的 api！！。您是否扩展了任何其他 api 来创建此 checkColumn api？

这是一个插件，从EXTJS 2开始就可以使用了

【参考方案1】：

在 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-col0">&#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;

【参考方案2】：

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

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

This answer to a similar question 展示了如何覆盖 CheckColumn 并添加 beforecheckchange 和 checkchange 事件。

【参考方案3】：

简单回答

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

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