Results 1 to 2 of 2

Thread: 'simple' selection mode fix for grids - 6.6.0 Modern

    You found a bug! We've classified it as EXTJS-27591 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium User
    Join Date
    Jun 2018
    Posts
    21

    Default 'simple' selection mode fix for grids - 6.6.0 Modern

    Hello everyone,

    I posted this in the support forums, but I figured I should post it here too, so it's publicly available for anyone else who needs a fix for this issue. The 'simple' selection mode is bugged in Modern, as noted here. While the override in the linked thread works for lists, it does not work for grids. I made an override that will make the simple selection mode function as intended for Modern grids. Here it is:
    Code:
    /**
     * Simple selection mode is bugged, and this should fix it for grids.
     * Note: grids do not use the selectWithEvent under Ext.dataview.selection.Model as lists do.
     * TODO: Remove this override and use simple mode normally once ExtJS 6.6.1 is released and applied to this project,
    * if the bug is actually fixed as they currently claim.
     */
    Ext.define(null, {
        override: 'Ext.grid.selection.Model',
    
        privates: {
            /**
             * Called when the grid's Navigation model detects navigation events (`mousedown`,
             * `click` and certain `keydown` events).
             * @param {Ext.event.Event} navigateEvent The event which caused navigation.
             * @private
            */
            onNavigate: function (navigateEvent) {
                var me = this,
                    store = me.getStore(),
                    selectingRows = me.getRows(),
                    selectingCells = me.getCells(),
                    selectingColumns = me.getColumns(),
                    checkbox = me.getCheckbox(),
                    checkboxOnly = me.checkboxOnly,
                    mode = me.getMode(),
                    location = navigateEvent.to,
                    toColumn = location.column,
                    record = location.record,
                    sel = me.getSelection(),
                    ctrlKey = navigateEvent.ctrlKey,
                    shiftKey = navigateEvent.shiftKey,
                    adding = true,
                    count, changedRow, selectionChanged, selected;
    
                if (navigateEvent.stopSelection || toColumn === me.checkboxColumn) {
                    return;
                }
    
                if (!navigateEvent.pointerType && navigateEvent.getKey() !== navigateEvent.SPACE) {
                    if (ctrlKey) {
                        return;
                    }
    
                    changedRow = !navigateEvent.from || (location.recordIndex !== navigateEvent.from.recordIndex);
                    if (!changedRow && !(selectingCells || selectingColumns)) {
                        return;
                    }
                }
    
                if (sel && (sel.isCells || (sel.isColumns && selectingRows && !(ctrlKey || shiftKey))) &&
                    sel.getCount() > 1 && !shiftKey && navigateEvent.type === 'click') {
                    return;
                }
    
                if (!(selectingCells || selectingColumns || selectingRows) || !record ||
                    navigateEvent.type === 'mousedown') {
                    return;
                }
    
                if (ctrlKey && navigateEvent.keyCode === navigateEvent.A && mode === 'multi') {
                    if (!sel || sel.getCount() < 2) {
                        me.selectAll();
                    } else {
                        me.deselectAll();
                    }
                    me.updateHeaderState();
                    return;
                }
    
                if (shiftKey && mode === 'multi') {
                    if (toColumn === me.numbererColumn || toColumn === me.checkColumn ||
                        !(selectingCells || selectingColumns) || (sel && (sel.isRows || sel.isRecords))) {
                        if (selectingRows) {
                            if (toColumn !== checkbox && checkboxOnly) {
                                return;
                            }
                            sel = me.getSelection('records');
                            if (!sel.getRangeSize()) {
                                if (me.selectionStart == null) {
                                    me.selectionStart = location.recordIndex;
                                }
                                sel.setRangeStart(me.selectionStart);
                            }
                            sel.setRangeEnd(location.recordIndex);
                            selectionChanged = true;
                        }
                    }
                    else {
                        if (selectingCells) {
                            sel = me.getSelection('cells');
                            count = sel.getCount();
                            if (!sel.getRangeSize()) {
                                sel.setRangeStart(navigateEvent.from || new Ext.grid.Location(me.getView(), {
                                    record: 0,
                                    column: 0
                                }));
                            }
                            sel.setRangeEnd(location);
                            adding = count < sel.getCount();
                            selectionChanged = true;
                        } else if (selectingColumns) {
                            sel = me.getSelection('columns');
                            if (!sel.getCount()) {
                                sel.setRangeStart(toColumn);
                            }
                            sel.setRangeEnd(toColumn);
                            selectionChanged = true;
                        }
                    }
                } else {
                    me.selectionStart = null;
                    if (sel) {
                        // This fixes clicking an unselected row
                        if ((mode !== 'multi' || !ctrlKey) && mode !== 'simple') {
                            sel.clear(true);
                        }
                    }
    
                    if (selectingRows && (toColumn === me.numbererColumn ||
                        toColumn === checkbox || !selectingCells)) {
                        if (toColumn !== checkbox && checkboxOnly || (navigateEvent.keyCode &&
                            navigateEvent.from && record === navigateEvent.from.record)) {
                            return;
                        }
    
                        sel = me.getSelection('records');
    
                        if (sel.isSelected(record)) {
                            if (ctrlKey || toColumn === checkbox || me.getDeselectable()) {
                                sel.remove(record);
                                selectionChanged = true;
                            }
                        } else {
                            // Another fix for clicking an unselected row
                            sel.add(record, ctrlKey || toColumn === checkbox || mode === 'simple');
                            selectionChanged = true;
                        }
    
                        if (selectionChanged && (selected = sel.getSelected()) && selected.length) {
                            me.selectionStart = store.indexOf(selected.first());
                            sel.setRangeStart(me.selectionStart);
                        }
                    }
                    else {
                        if (selectingCells) {
                            sel = me.getSelection('cells', true);
                            sel.setRangeStart(location);
                            selectionChanged = true;
                        }
                        else if (selectingColumns) {
                            sel = me.getSelection('columns');
    
                            if (ctrlKey) {
                                if (sel.isSelected(toColumn)) {
                                    sel.remove(toColumn);
                                } else {
                                    sel.add(toColumn);
                                }
                            } else {
                                sel.setRangeStart(toColumn);
                            }
                            selectionChanged = true;
                        }
                    }
                }
    
                if (selectionChanged) {
                    if (!sel.isRecords) {
                        me.fireSelectionChange(null, adding);
                    }
                }
    
                me.lastDragLocation = location;
            }
        }
    });

  2. #2
    Sencha Staff
    Join Date
    Sep 2017
    Posts
    126

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

Similar Threads

  1. [FIXED] Modern list simple selection not keeping existing selections
    By mitchellsimoens in forum Ext JS 6.x Bugs
    Replies: 0
    Last Post: 21 Jun 2018, 12:01 PM
  2. Replies: 6
    Last Post: 21 Mar 2014, 7:19 AM
  3. Replies: 1
    Last Post: 3 Sep 2013, 12:10 PM
  4. Replies: 1
    Last Post: 8 Apr 2013, 10:06 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •