ExtJS 4: A grid column that displays checkbox with checkall header and can be hidden

Question

We are using ExtJS 4.2, so that is my context for this question.

I need to have a column in a grid that:

1. Display a checkbox on each row which can be selected/deselected. It is for the purpose of tracking user selections and not synchronized with underlying store data.
2. Has a checkall checkbox in header that allows user to select or deselect all rows in the grid.
3. Can be hidden/removed based on certain condition when page is rendered (user permission or data).

I tried the following:

1. SelModel - which will satisfy requirement No. 2, but cannot be manipulated once defined (see http://www.sencha.com/forum/showthre...selectionModel).

2. CheckColumn - which satisfies requirement No. 3, but doesn't have a checkall box in column header (see http://www.sencha.com/forum/showthread.php?265924).

Is there a way for me to achieve what I wanted?

Thanks in advance

Haixi

Answer 1

See my answer to this question: ExtJS 4 select multiple CheckColumn checkboxes with checkbox header

The addition you would need to make is that on the 'update' event of the grid's store, you will need to manually create code that selects the row with the grid's selectionModel based on the new value in the record.

Answer 2

I had the same requirements and was able to use the 'Ext.selection.CheckboxModel' feature (Ext 4.2). Basically, I override the renderer through the config object. I am using the Sencha Architect 3 and this is the code that was produced:

selModel: Ext.create('Ext.selection.CheckboxModel', me.processMyCheckboxSelectionModel3({}))

processMyCheckboxSelectionModel1: function(config) {
        config.renderer = function(value, metaData, record, rowIndex, colIndex, store, view) {
            var status = record.get('Status');
            if (status  === 'Failed') {
                        var baseCSSPrefix = Ext.baseCSSPrefix;
                        metaData.tdCls = baseCSSPrefix + 'grid-cell-special ' + baseCSSPrefix + 'grid-cell-row-checker';
                        return '<div class="' + baseCSSPrefix + 'grid-row-checker">&#160;</div>';
            } else {
                        return '';
            }

        };
        return config;
}

What the renderer is returning when I want it to show a checkbox is copied from Reimius' answer, the only difference with this approach is I am using the Ext 4.2's built in 'Ext.selection.CheckboxModel'.