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

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