Prevent keyboard from switching to grid

I want a single selection grid, at first I didn't include the selection model configuration because that is the default . This is great for mouse selection, but if I click SHIFT + END

it selects all entries (or PAGE UP

, HOME

or END

has a similar effect).

Selected entries cannot be deselected without reloading the grid (unless I wanted the grid to be configured with allowDeselect: true

), which I don't).

Thinking it was a problem with default ExtJS docs, I then configured the grid with SINGLE

explicitly, but still had a problem.

I checked out some of its exemplary nets here , and they all have the same problem - any individual selection grid will prevent multiselektsiyu mouse, but it can be multiplexed using the shift key, and HOME

, END

, PAGE UP

or PAGE DOWN

. And then it is impossible to deselect the entries.

This seems to be a structural error and I will be recording the 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 keypress

globally and stopping the event, but that won't even do it. For example, this will log to the console, but the event is still:

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 don't want to disable all keyboard navigation with enableKeyNav: false

I just don't want to mux with the keyboard.

+3


source to share


1 answer


You can use:

selModel: {
    enableKeyNav: false
},

      

in the grid configuration. But this was unexpected behavior of the selection model for me ...



Update

As a very simple version:

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

      

+2


source







All Articles