Issue with extjs checkbox header

Question

I'm currently implementing part of a project in ExtJS, the requires me to modify an existing grid to only show checkboxes on rows with a certain status(different than AN, NP, RS), this status is determined by the value in record.data.codiceStato :

selectionModel = Ext.create('Ext.selection.CheckboxModel', {
    checkOnly: true,
    listeners: {
        select: function (sm, idx, rec) {
            alert("Look ma!");
        },
        beforeSelect: function (sm, idx, rec) {
            if (idx.data.codiceStato == 'RS' || idx.data.codiceStato == 'AN' || idx.data.codiceStato == 'NP')
                return false;
        }
    },
    renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
        if (record.data.codiceStato != 'RS' && record.data.codiceStato != 'AN' && record.data.codiceStato != 'NP')
            return '<div style="margin-left: -1px;" class="' + Ext.baseCSSPrefix + 'grid-row-checker"> </div>';

        else
            return '';
    }
});

I have written a check in my beforeSelect listener in order to avoid the checkbox selecting the rows that do not have this status and it works. The only problem is with the header checkbox now, in fact, when I click on it the first time it enables all the rows with a checkbox, but then it doesn't uncheck them when I click on it again. Any solutions ? Thank you

Matt Allwood Matt Allwood · Accepted Answer · 2018-07-26T16:25:02

Basically there's a bit of code (Ext.selection.CheckboxModel.updateHeaderState) that determines whether the header needs to be checked by seeing whether selected.count = store.count. In your case it doesn't, so you need to override this function in your code so that selected.count = selectable.count.

It's a private method though, so Sencha don't guarantee keeping it around across versions, so you need to keep an eye on it once you upgrade.

Basically take your selmodel and add an object. This will overwrite the one that normally exists in the framework.

var selModel = Ext.create('Ext.selection.CheckboxModel', {
    ...
    updateHeaderState: function() {
         // copy code from your Ext framework here, but modified for your use case
    }
});

Issue with extjs checkbox header

1 Answers