单击 headerCheckbox 时，不会为网格行调用 checkcolumn 事件（Extjs 6.6）答案

【问题标题】：On click of headerCheckbox, checkcolumn event is not getting called for the grid rows (Extjs 6.6)单击 headerCheckbox 时，不会为网格行调用 checkcolumn 事件（Extjs 6.6）
【发布时间】：2020-12-13 11:01:50
【问题描述】：

我有一个网格，我在其中添加了headerCheckbox 以获得全选/取消全选的功能。还将checkchange 事件添加到checkcolumn。当我手动选择/取消选择任何复选框时，该事件工作正常，但当我通过标题复选框进行选择时它不会触发。

所以我的要求是，只要复选框中有任何选择更改，就应该触发事件。

这是我在 Grid 中的专栏：

{     
      xtype: 'checkcolumn',
      dataIndex: 'xyz',
      text: '',
      headerCheckbox: true,
      width: 25,
      stopSelection: true,
      sortable: false,
      draggable: false,
      resizable: false,
      menuDisabled: true,
      hideable: false
}

Controller 中的一个事件：

control: {
    'checkcolumn':{
        checkchange: 'onCheckChange'
    }
},

onCheckChange : function ( checkbox, rowIndex, checked, record, e, eOpts ) {
    console.log(record);
}

【问题讨论】：

如果您将侦听器添加到 checkcolumn 组件而不是控制器的控制配置，问题是否仍然存在？
@ground_call 是的，我首先只添加到组件中，然后只是为了清理我将其添加到控制器中的代码。但行为保持不变。
这里有一个工作示例：fiddle.sencha.com/#view/editor&fiddle/24u1它对你有用吗？

标签： javascript extjs extjs5 extjs6-classic

【解决方案1】：

要捕获列标题检查更改事件，您需要监听'headercheckchange'：

var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'email', 'phone', 'active'],
    data: [{
        name: 'Lisa',
        email: 'lisa@simpsons.com',
        phone: '555-111-1224',
        active: true
    }, {
        name: 'Bart',
        email: 'bart@simpsons.com',
        phone: '555-222-1234',
        active: true
    }, {
        name: 'Homer',
        email: 'homer@simpsons.com',
        phone: '555-222-1244',
        active: false
    }, {
        name: 'Marge',
        email: 'marge@simpsons.com',
        phone: '555-222-1254',
        active: true
    }]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    height: 200,
    width: 400,
    renderTo: Ext.getBody(),
    store: store,
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        text: 'Phone',
        dataIndex: 'phone'
    }, {
        xtype: 'checkcolumn',
        headerCheckbox: true,
        text: 'Active',
        dataIndex: 'active',
        listeners: {
            headercheckchange: function(checkColumn, checked) {
                console.log("Header Checkbox change event: ", checked);
            },
            checkchange: function(checkboxColumn, rowIndex, checked, record, e, eOpts ) {
                console.log("Grid body column checkbox change event: ", rowIndex, checked, record);
            }
        }
    }]
});

【讨论】：