ExtJs - Checkbox selection model, disable checkbox per row and lose clearing all the selections

I have a grid with a checkbox selection model.

There are some rows that not be selectable, based on a value in a field. It's work.

My problem is that clearing all the selections by clicking the checkbox in the column header doesn't work. On this link I see that costa was faced the same problem as me: ExtJs - Checkbox selection model, disable checkbox per row.

This listener is worked, but it's break checkbox clearing.

Code:

xtype: 'grid',
border: false,

selModel: {
    selType: 'checkboxmodel',
    listeners: {
        beforeselect: function(grid, record) {
            if (!record.get('supplier')) {
                return false;
            }
        }
    }

colums:[
....
],
....

Does anyone have an idea how to do this?

Thank you.

The header checkbox is checked only if all the records are checked. In your case it is impossible to check all the records => header checkbox will be never checked => it is impossible to uncheck. To implement new logic, you can extend the checkbox model and write your own one with custom logic (by overriding the updateHeaderState method). Something like this:

Ext.define('CustomCheckboxModel', {
    alias: 'selection.custom_checkboxmodel',
    extend: 'Ext.selection.CheckboxModel',

    allowDeselect: true,

    updateHeaderState: function () {
        // check to see if all records are selected
        var me = this,
            store = me.store,
            storeCount = store.getCount(),
            views = me.views,
            hdSelectStatus = true,
            selectedCount = 0,
            selected, len, i;

        if (!store.isBufferedStore && storeCount > 0) {
            selected = me.selected;
            hdSelectStatus = true;

            store.each(function (record) {
                if (!record.get('supplier')) {
                    return true;
                }
                var found = false;
                for (i = 0, len = selected.getCount(); i < len; ++i) {
                    if (record.getId() == selected.getAt(i).id) {
                        found = true;
                        break;
                    }
                }
                if (!found) {
                    hdSelectStatus = found;
                    return false;
                }
            }, this);
        }

        if (views && views.length) {
            me.column.setHeaderStatus(hdSelectStatus);
        }
    },
});

Ext.application({
    name: 'Fiddle',

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

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: store,
            columns: [{
                text: 'Name',
                dataIndex: 'name'
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                text: 'Phone',
                dataIndex: 'phone'
            }, {
                xtype: 'checkcolumn',
                text: 'Supplier',
                dataIndex: 'supplier'
            }],
            height: 400,
            renderTo: Ext.getBody(),
            selModel: {
                selType: 'custom_checkboxmodel',
                listeners: {
                    beforeselect: function (selectionCheckboxModel, record, index, eOpts) {
                        console.log(record);
                        if (!record.get('supplier')) {
                            return false;
                        }
                        return true;
                    }
                }
            }
        });

    }
});