The following override of the ‘Ext.selection.CheckboxModel‘ class will add selectable(record) method to enable/disable the selection of the row. The method must return true/false to enable/disable the selection of the row.
Put the following file in the overrides/selection/CheckboxModel.js file and rebuild your application.
Ext.define('overrides.selection.CheckboxModel', { override: 'Ext.selection.CheckboxModel', getHeaderConfig: function () { var config = this.callParent(); if (Ext.isFunction(this.selectable)) { config.selectable = this.selectable; config.renderer = function (value, metaData, record, rowIndex, colIndex, store, view) { if (this.selectable(record)) { record.selectable = false; return ''; } record.selectable = true; return this.defaultRenderer(); }; this.on('beforeselect', function(rowModel, record, index, eOpts) { return !this.selectable(record); }, this); } return config; }, 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, i, notSelectableRowsCount = 0; if (!store.isBufferedStore && storeCount > 0) { hdSelectStatus = true; store.each(function(record) { if(!record.selectable) { notSelectableRowsCount++; } }, this); selected = me.selected; for (i = 0, len = selected.getCount(); i < len; ++i) { if (store.indexOfId(selected.getAt(i).id) > -1) { ++selectedCount; } } hdSelectStatus = storeCount === selectedCount + notSelectableRowsCount; } if (views && views.length) { me.column.setHeaderStatus(hdSelectStatus); } } });
And the working fiddle sample: