ExtJS 4 CheckboxModel how allow deselect when using mode MULTI

Question

We are using a checkboxmodel in our application that requires we allow multiple items in our grid to be selected. Therefore we have to set mode : 'MULTI' in our checkbox model.

Default behavior requires the user to hold CTRL and click an item to deselect it when using this configuration. I'd like to override the default behavior to allow users to deselect an item in the list by clicking it a second time. the allowDeselect config for the checkboxModel can only be used when mode is set to SINGLE, and again, we are using MULTI.

Any suggestions on overriding this behavior in ExtJS 4 are greatly appreciated!

Answer 1

Did you mean mode: 'SIMPLE'?

mode : String
Mode of selection. Valid values are:

• SINGLE - Only allows selecting one item at a time. Use allowDeselect to allow deselecting that item. This is the default.
• SIMPLE - Allows simple selection of multiple items one-by-one. Each click in grid will either select or deselect an item.
• MULTI - Allows complex selection of multiple items using Ctrl and Shift keys.

Try it out: DEMO

Should work frorm 3+. I don't think this configuration is new.

Answer 2

Try this:

// Allow deselecting the only selected record in MULTI mode with a simple click.
// Note that this will only happen when allowdeselect is true
Ext.override( Ext.selection.Model, {
    selectWithEvent: function(record, e, keepExisting) {
        var me = this;

        switch (me.selectionMode) {
            case 'MULTI':
                if (e.ctrlKey && me.isSelected(record)) {
                    me.doDeselect(record, false);
                } else if (e.shiftKey && me.lastFocused) {
                    me.selectRange(me.lastFocused, record, e.ctrlKey);
                } else if (e.ctrlKey) {
                    me.doSelect(record, true, false);
                // Mod Start
                } else if (me.isSelected(record) && !e.shiftKey && !e.ctrlKey && me.selected.getCount() == 1 && me.allowDeselect) {
                    me.doDeselect(record, false);                    
                // Mod End                        
                } else if (me.isSelected(record) && !e.shiftKey && !e.ctrlKey && me.selected.getCount() > 1) {
                    me.doSelect(record, keepExisting, false);
                } else {
                    me.doSelect(record, false);
                }
                break;
            case 'SIMPLE':
                if (me.isSelected(record)) {
                    me.doDeselect(record);
                } else {
                    me.doSelect(record, true);
                }
                break;
            case 'SINGLE':
                // if allowDeselect is on and this record isSelected, deselect it
                if (me.allowDeselect && me.isSelected(record)) {
                    me.doDeselect(record);
                // select the record and do NOT maintain existing selections
                } else {
                    me.doSelect(record, false);
                }
                break;
        }
    },
});

Answer 3

In ExtJS 4, if shift key selection is required, then override 'onRowSelection; method and modify condition for multiple selection " if (mode !== 'SINGLE' && mode !== 'MULTI') "