在Ext Js复选框模型中禁用Checbox

Question

I have grid with checkboxmodel , As per my requirement I have to disable some checkbox in checkbox model and restrict user to select that row. I am able to achieve below code.

        viewConfig: {
            getRowClass: function (record, rowIndex, rowParams, store) {
                return record.data.name == 'Lisa' ? 'bg' : "";
            }
        },
        listeners: {
          beforeselect: function ( test , record , index , eOpts ) {
              return record.data.name == "Lisa" ? false : true;
          }
        }

above configs are used in grid and below is my css

.bg .x-grid-cell-row-checker{
     background-color: grey;
     pointer-events: none;
     opacity: 0.4;
}

Everythings work fine only one issue is header checkbox is not working ie not able deselectAll from header and able to select but not getting checked

Here is my working fiddle

Ext js version 5

Answer 1

The problem occurs in the function updateHeaderState of the Ext.selection.CheckboxModel . The function checks if all checkboxes are selected by hdSelectStatus = storeCount === selectedCount; . In your case selectedCount is not matching the storeCount and the state of the header checkbox is not updated.

You could extend the Ext.selection.CheckboxModel and override the updateHeaderState function to fit your needs.

Answer 2

Expanding on And-y's answer, I would construct my own class and do something like in this Fiddle . I did add a few things, like the isDisabled flag in the model, but I don't see that as a bad thing, and it greatly helps out with deciding how to show the checkbox/fixing the Check All checkbox logic.

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('MySelectionModel', {
            extend: 'Ext.selection.CheckboxModel',
            alias: 'selection.mySelectionModel',
            // default
            disableFieldName: 'isDisabled',
            listeners: {
                beforeselect: function (test, record, index, eOpts) {
                    return !record.get(this.disableFieldName);
                }
            },
            renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                if (record.get(this.disableFieldName)) {
                    metaData.tdCls = 'bg';
                }
                else {
                    return this.callParent(arguments);
                }
            },
            updateHeaderState: function () {
                // check to see if all records are selected
                var me = this,
                    store = me.store,
                    storeCount = store.getCount(),
                    views = me.views,
                    hdSelectStatus = false,
                    selectedCount = 0,
                    selected, len;
                var disableFieldName = me.disableFieldName;

                if (!store.isBufferedStore && storeCount > 0) {
                    selected = me.selected;
                    hdSelectStatus = true;
                    // loop over all records
                    for (var i = 0, j = 0; i < storeCount; i++) {
                        var rec = store.getAt(i);
                        var selectedRec = selected.getAt(j);
                        // Check selection collection for current record
                        if (selectedRec && selected.indexOf(rec) > -1) {
                            ++selectedCount;
                            // Increment selection counter
                            j++;
                        }
                        // Otherwise, automatically consider disabled as part of selection
                        else if (rec.get(disableFieldName)) {
                            ++selectedCount;
                        }
                    }
                    hdSelectStatus = storeCount === selectedCount;
                }

                if (views && views.length) {
                    me.toggleUiHeader(hdSelectStatus);
                }
            }
        });
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone', 'isDisabled'],
            data: {
                'items': [{
                    'name': 'Lisa',
                    isDisabled: true,
                    "email": "lisa@simpsons.com",
                    "phone": "555-111-1224"
                }, {
                    'name': 'Bart',
                    "email": "bart@simpsons.com",
                    "phone": "555-222-1234"
                }, {
                    'name': 'Homer',
                    "email": "homer@simpsons.com",
                    "phone": "555-222-1244"
                }, {
                    'name': 'Marge',
                    "email": "marge@simpsons.com",
                    "phone": "555-222-1254"
                }]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    rootProperty: 'items'
                }
            }
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            selModel: {
                selType: "mySelectionModel",
                showHeaderCheckbox: true,
                mode: 'MULTI',
                allowDeselect: true,
                toggleOnClick: false,
                checkOnly: false
            },
            columns: [{
                text: 'Name',
                dataIndex: 'name'
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                text: 'Phone',
                dataIndex: 'phone'
            }],
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
        });
    }
});