EXTJS: How to determine if header checkbox in datagrid has been clicked

Question

I want to know if the headerCheckbox (select All) has been clicked. I got this example from sencha fiddle here:

https://fiddle.sencha.com/#fiddle/1gvv&view/editor

`Ext.application({ name: 'Fiddle', launch: function() {

    // Define our data model
    Ext.define('MyModel', {
        extend: 'Ext.data.Model',
        fields: ['firstField', 'secondField']
    });

    // Generate mock data
    var data = [{
        "firstField": "one",
        "secondField": "1"
    }, {
        "firstField": "two",
        "secondField": "2"
    }, {
        "firstField": "three",
        "secondField": "3"
    }, {
        "firstField": "four",
        "secondField": "4"
    }, {
        "firstField": "five",
        "secondField": "5"
    }];

    // create the Data Store
    var store = Ext.create('Ext.data.Store', {
        // destroy the store if the grid is destroyed
        autoDestroy: true,
        model: 'MyModel',
        proxy: {
            type: 'memory'
        },
        data: data
    });

    var sm = new Ext.selection.CheckboxModel({
        checkOnly: true,
        listeners: {
           selectionchange: 'onSelectionChange'
        }
    });

    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        selModel: sm,
        columns: [{
            header: 'firstField',
            dataIndex: 'firstField',
            flex: 1
        }, {
            header: 'secondField',
            dataIndex: 'secondField',
            flex: 1
        }],
        tbar: [{
            xtype: 'textfield',
            fieldLabel: 'firstField',
            itemId: 'mytextfield'
        }, {
            text: 'Select',
            handler: function() {
               // try to find the record having the firstField field as the entered one
                var selectedRecord = grid.getStore().findRecord('firstField', grid.down('#mytextfield').getValue()); 
               if (selectedRecord) {
                    grid.getSelectionModel().select(selectedRecord);
                }
            }
        }]
    });
    new Ext.window.Window({
        width: 700,
        height: 400,
        items: grid,
        layout: 'fit',
        closable: false
    }).show();


}

});`

I have put the onSelectionChange listener but what to put inside to know if select All has been clicked?

Thanks for helping guys.

Answer 1

I came across your question today while searching for exactly the same thing.

After some attempts, this is what I got -

Sencha Fiddle

Essentially, you need to get the checkcolumn and then see if the allChecked attribute against it is set to true or not.