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:

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.
Has a checkall checkbox in header that allows user to select or deselect all rows in the grid.
Can be hidden/removed based on certain condition when page is rendered (user permission or data).

I tried the following:

SelModel - which will satisfy requirement No. 2, but cannot be manipulated once defined (see http://www.sencha.com/forum/showthre...selectionModel).
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

score 1 · Answer 1 · edited May 23 '17 at 11:51

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.

edited May 23 '17 at 11:51

Community

1
1

answered Sep 26 '13 at 17:15

Reimius

5,694
5
24
42

Reimius, thanks for the reply. I followed what you wrote in the linked post, but I could not get it to work correctly. There is no header checkbox displayed. Is it because I am using version 4.2? Anyway, I would like not to overwrite the default checkcolumn class, and would rather extend it and create my own class. Any further suggestion? – Haixi Liu Oct 15 '13 at 12:25
The grid rendering system is quite different in 4.2, so this is probably the reason. All I can recommend is that you look into how the code works and see if you can port it to 4.2. Also, if you would like to subclass it, just change the name of the class in the first parameter to Ext.define and change the widget name. – Reimius Oct 15 '13 at 13:16
Thanks for the tip, I will look into the 4.2 code base to figure it out. – Haixi Liu Oct 18 '13 at 02:34
I managed to add header with checkbox. You have to change function getHeaderCheckboxImage where it returns something like this: '
'+ ''+text+'' Where text = this.title, title must be defined in columncheck. – Almas Jul 23 '15 at 10:18

score 0 · Answer 2 · edited May 23 '17 at 12:27

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'.

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

2 Answers2