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

Question

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.

Answer 1

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

    }
});