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);
}

Does the issue persist if you add the listener to the checkcolumn component instead of the controllers' control config? — ground_call
@ground_call Yes I added first to the component only, then just to clean the code I added it to the controller. But the behavior remains the same. — Mani
There is a working sample here: fiddle.sencha.com/#view/editor&fiddle/24u1 Is it useful for you? — Muzaffer Galata

Arthur Rubens Arthur Rubens · Accepted Answer · 2020-12-14T16:14:14

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);
            }
        }
    }]
});

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

1 Answers