Question

在ExtJS 4中，我在grid.Panel中使用CheckBoxModel以及显示当前所选记录数的显示计数。然后，我通过在检查或取消选中单个记录然后发布所选数组值时监听事件来更新我选择的记录计数。选择单个记录时，它可以正常工作。但是，当我选中“ALL”复选框时，无论是选择还是取消选择所有记录，我似乎找不到我的侦听器对于click事件的入口点，因此我显示的记录计数不会更新。另外，CheckBoxModel没有这样的“ALL”选择/未选择事件。

Answer 1

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

检查this

Answer 2

最近我发现自己还需要将一些函数绑定到selectall并取消选择网格上的所有操作。我的解决方案是扩展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'); }
    }
  }),

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

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

2 个答案: