Surya Prakash Tumma Surya Prakash Tumma -4 years ago 323
Javascript Question

Disable Checbox in Ext Js checkbox model

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 i.e not able deselectAll from header and able to select but not getting checked

Here is my working fiddle

Ext js version 5

Answer Source

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()
        });
    }
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download