單擊 headerCheckbox 時，不會為網格行調用 checkcolumn 事件（Extjs 6.6）

Question

我有一個網格，我在其中添加了headerCheckbox以獲得全選/取消全選的功能。 還將checkchange事件添加到checkcolumn 。 當我手動選擇/取消選擇任何復選框時，該事件工作正常，但當我通過 header 復選框進行選擇時它不會觸發。

所以我的要求是，只要復選框中有任何選擇更改，事件就會被觸發。

這是我在 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);
}

Answer 1

要捕獲 header 列檢查更改事件，您需要偵聽“ 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);
            }
        }
    }]
});