On click of headerCheckbox, checkcolumn event is not getting called for the grid rows (Extjs 6.6)

Question

I have a grid in which I have added headerCheckbox to get the functionality of Select/Deselect All. Also added checkchange event to the checkcolumn. The event works fine when I manually select/deselect any checkbox, but it does not fire when I do the selection via the header checkbox.

So my requirement is like whenever there is any selection change in the checkbox the event should get fired.

This is my column in Grid:

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

An event in the Controller:

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

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

Answer 1

To catch the column header check change event you need to listen 'headercheckchange':

var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'email', 'phone', 'active'],
    data: [{
        name: 'Lisa',
        email: '[email protected]',
        phone: '555-111-1224',
        active: true
    }, {
        name: 'Bart',
        email: '[email protected]',
        phone: '555-222-1234',
        active: true
    }, {
        name: 'Homer',
        email: '[email protected]',
        phone: '555-222-1244',
        active: false
    }, {
        name: 'Marge',
        email: '[email protected]',
        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);
            }
        }
    }]
});