ExtJs - Unselect multiple rows in grid with selType: "checkboxmodel"

Question

Is there a way to unselect multiple rows holding SHIFT (that are already selected)? See fiddle here.

No luck yet.

Thanks.

Answer 1

No it's not possible out of the box.

Here is an override that will do the trick. (if it helps leave me a vote up)

// override line 86 - 88
Ext.define('Fiddle.overrides.selection.Model', {
    override: 'Ext.selection.Model',
    
    onNavigate: function(e) {
        // Enforce the ignoreRightMouseSelection setting.
        // Enforce presence of a record.
        // Enforce selection upon click, not mousedown.
        if (!e.record || this.vetoSelection(e.keyEvent)) {
            return;
        }

        this.onBeforeNavigate(e);
 
        // eslint-disable-next-line vars-on-top
        var me = this,
            keyEvent = e.keyEvent,
            // ctrlKey may be set on the event if we want to treat it like a ctrlKey so
            // we don't mutate the original event object
            ctrlKey = keyEvent.ctrlKey || e.ctrlKey,
            recIdx = e.recordIndex,
            record = e.record,
            lastFocused = e.previousRecord,
            isSelected = me.isSelected(record),
            from = me.selectionStart
                ? me.selectionStart
                : (me.selectionStart = e.previousRecord),
            fromIdx = e.previousRecordIndex,
            key = keyEvent.getCharCode(),
            isSpace = key === keyEvent.SPACE,
            changedRec = e.record !== e.previousRecord,
            direction;
 
        direction =
            key === keyEvent.UP || key === keyEvent.PAGE_UP || key === keyEvent.HOME ||
                    (key === keyEvent.LEFT && changedRec)
                ? 'up'
                : (key === keyEvent.DOWN || key === keyEvent.PAGE_DOWN ||
                   key === keyEvent.END || (key === keyEvent.RIGHT && changedRec)
                    ? 'down'
                    : null);
 
        switch (me.selectionMode) {
            case 'MULTI':
                me.setSelectionStart(e.selectionStart);
 
                if (key === keyEvent.A && ctrlKey) {
                    // Listening to endUpdate on the Collection will be more efficient
                    me.selected.beginUpdate();
                    me.selectRange(0, me.store.getCount() - 1);
                    me.selected.endUpdate();
                }
                else if (isSpace) {
                    // SHIFT+SPACE, select range
                    if (keyEvent.shiftKey) {
                        me.selectRange(from, record, ctrlKey);
                    }
                    else {
                        // SPACE pressed on a selected item: deselect.
                        if (isSelected) {
                            if (me.allowDeselect) {
                                me.doDeselect(record);
                            }
                        }
                        // SPACE on an unselected item: select it
                        // keyEvent.ctrlKey means "keep existing"
                        else {
                            me.doSelect(record, ctrlKey);
                        }
                    }
                }
 
                // SHIFT-navigate selects intervening rows from the last selected
                // (or last focused) item and target item
                else if (keyEvent.shiftKey && from) {
                    // If we are heading back TOWARDS the start rec - deselect skipped range...
                    if (direction === 'up' && fromIdx <= recIdx) {
                        me.deselectRange(lastFocused, recIdx + 1);
                    }
                    else if (direction === 'down' && fromIdx >= recIdx) {
                        me.deselectRange(lastFocused, recIdx - 1);
                    }
 
                    // If we are heading AWAY from start point, or no CTRL key,
                    // so just select the range and let the CTRL control "keepExisting"...
// ==>
                    else if (isSelected && from !== record && !me.isSelected(from)) {
                        me.deselectRange(from, record, ctrlKey);
                    }
// <==
                    else if (from !== record) {
                        me.selectRange(from, record, ctrlKey);
                    }
 
                    me.lastSelected = record;
                }
 
                else if (key) {
                    if (!ctrlKey) {
                        me.doSelect(record, false);
                    }
                }
                else {
                    me.selectWithEvent(record, keyEvent);
                }
 
                break;
 
            case 'SIMPLE':
                if (key === keyEvent.A && ctrlKey) {
                    // Listening to endUpdate on the Collection will be more efficient
                    me.selected.beginUpdate();
                    me.selectRange(0, me.store.getCount() - 1);
                    me.selected.endUpdate();
                }
                else if (isSelected) {
                    me.doDeselect(record);
                }
                else {
                    me.doSelect(record, true);
                }
 
                break;
 
            case 'SINGLE':
                // CTRL-navigation does not select
                if (!ctrlKey) {
                    // Arrow movement
                    if (direction) {
                        me.doSelect(record, false);
                    }
                    // Space or click
                    else if (isSpace || !key) {
                        me.selectWithEvent(record, keyEvent);
                    }
                }
 
                break;
        }
 
        // selectionStart is a start point for shift/mousedown to create a range from.
        // If the mousedowned record was not already selected, then it becomes the
        // start of any range created from now on.
        // If we drop to no records selected, then there is no range start any more.
        if (!keyEvent.shiftKey && !me.destroyed && me.isSelected(record)) {
            me.selectionStart = record;
            me.selectionStartIdx = recIdx;
        }
    }
});