Capture CTRL+S cross-browser with ExtJS 4.x and avoid browser action

Question

I want to stop default browser action CTRL+S and have my RIA save the form data while user press this key combination for our application.

We are using ExtJS 4.1.x

Similar solution here using jQuery: Best cross-browser method to capture CTRL+S with JQuery?

score 3 · Accepted Answer · answered Feb 13 '13 at 20:20

Here is how I usually do it in ExtJS apps (last case statement below), it seems to work well for me:

// attach key navigation to document
Ext.getDoc().on('keypress', function(event, target) {
    if (event.ctrlKey && !event.shiftKey) {
        event.stopEvent();

        switch(event.getKey()) {

            case event.LEFT :
                this.shiftTabs(-1);
                break;

            case event.RIGHT :
                this.shiftTabs(1);
                break;

            case event.DELETE :
                this.closeActiveTab();
                break;

            case event.F4 : // this is actually the "S" key
                this.saveAll(); // handler
                break;

            // other cases...
        }
    }
});

This is not cross browser compatible. You need to listen to the `keydown` event instead of `keypress`. Also, when listening to `keydown`, you don't need to listen to `event.F4`, it will be `event.S` as you would expect. — Justin, Jul 29 '13 at 22:10

Capture CTRL+S cross-browser with ExtJS 4.x and avoid browser action

1 Answers1