在 ExtJS 4 中使用 CheckBoxModel 时如何监听所有“Checked”或“UnChecked”事件？答案

【问题标题】：How to listen for ALL "Checked" or "UnChecked" event when using the CheckBoxModel in ExtJS 4?在 ExtJS 4 中使用 CheckBoxModel 时如何监听所有“Checked”或“UnChecked”事件？
【发布时间】：2011-12-22 02:38:36
【问题描述】：

在 ExtJS 4 中，我在 grid.Panel 中使用 CheckBoxModel 以及显示当前所选记录数的显示计数。然后，我通过在选中或取消选中单个记录时侦听事件来更新我选择的记录计数，然后发布所选的数组值。选择单个记录时它工作得很好。但是，当我选中选择或取消选择所有记录的“全部”复选框时，我似乎无法找到单击事件的侦听器的入口点，因此我显示的记录数不会更新。此外，CheckBoxModel 没有这样的“全部”选择/未选择事件。

【问题讨论】：

标签： extjs extjs4

【解决方案1】：

尝试在 CheckboxModel 上添加 selectionchange 监听器：在选择更改发生后触发。

查看this

【讨论】：

好建议，但逻辑可能很棘手 - 如果您点击 ALL 框或最后一个剩余框，则所有选择都是相同的 - 这可能是您想要的，也可能不是。
感谢 MMT。我会测试你的建议！
@user1110938 如果成功了，别忘了选中它（左侧的复选标记），以便其他人知道。
一个小改进：sm.getSelection().length 可以替换为 selected.length。无需通过整个 selectionModel。

【解决方案2】：

最近我发现自己还需要将一些函数绑定到网格上的全选和取消全选操作。我对此的解决方案是扩展checkboxmodel 选择模型，以便我可以附加在正确时间触发的selectall 和deselectall 侦听器。执行此操作的最简单方法如下所示。

首先声明你的新模型并确保它扩展了 checkboxModel

Ext.define('My.selection.CheckboxModel', {
  extend: 'Ext.selection.CheckboxModel',
  onHeaderClick: function (headerCt, header, e) {
    if (header.isCheckerHd) {
      e.stopEvent();
      var me = this, isChecked = header.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
      me.preventFocus = true;
      if (isChecked) {
        me.deselectAll(); // Pass true as a parameter to prevent selectionchanged and select events firing
        me.fireEvent('deselectall', me);
      }
      else {
        me.selectAll(); // Pass true as a parameter to prevent selectionchanged and select events firing
        me.fireEvent('selectall', me);
      }
      delete me.preventFocus;
    }
  }
});

然后在您的网格上将以下selModel 添加到配置对象：

  selModel: Ext.create('My.selection.CheckboxModel', {
    checkOnly: true, // you can add whatever normal configuration properties you want here
    listeners: {
      selectall: function () { console.log('selectAll'); },
      deselectall: function () { console.log('deselectAll'); }
    }
  }),

值得注意的是，除非您将 true 传递给扩展选择模型中的 selectall 和 deselectall 调用，否则网格和行上的 selectionChanged 和 select 侦听器也会触发。

【讨论】：