prevent keyboard multiselect for gridpanels

Question

I want a single select grid, at first I did not include any selection model configuration because that is the default. This works fine for mouse selections but if I key SHIFT + END it selects all records (or PAGE UP, HOME or END has a similar effect).

The selected records are then impossible to deselect without reloading the grid (unless I wanted a grid that is configured with allowDeselect: true - which I don't).

Thinking that this was a problem with the ExtJS docs about the default, I then configured the gridpanel with SINGLE select explicitly but still had the problem.

I checked out some of their example grids here, and they all have the same problem - any single select grid will prevent mouse multiselection but can be multiselected with the shift key and HOME, END, PAGE UP or PAGE DOWN. And it is then impossible to deselect the records.

Seems to be a bug in the framework and I will file a report, but since grids are one of the most commonly used components I assumed someone has a workaround for this.

In desperation I also tried listening to keypress globally and stopping the event but that won't even do it. For example, this will log to the console but the event runs anyway:

Ext.getDoc().on('keypress', function(event, target) {
    var key = event.getKey();

    // do not allow multiple grid selection
    if (event.shiftKey && (
        key == event.PAGE_UP ||
        key == event.PAGE_DOWN ||
        key == event.HOME ||
        key == event.END)) {

        console.log('unsuccessfully trying to stop the event!');
        event.stopEvent();
        event.stopPropagation();
        event.shiftKey = false;
        return false;
    }
});

EDIT:

I do not want to disable all keyboard navigation with enableKeyNav: false I just don't want to multiselect with the keyboard.

Answer 1

You can use:

selModel: {
    enableKeyNav: false
},

in grid config. But it was unexpected selection model behavior for me...

Update

As a very simple version:

selModel: {
    selectRange: function() {
        return false;
    }
},