In a previous post, I showed how it’s pretty simply to catch keystrokes in your controller, and then do cool stuff in your app. But what if you want to add an app-wide keystroke mapping? For example, consider you’re create something like Sencha’s desktop demo. Within such an interface, it might be nice to map keystrokes to functionality within your app (like initiating a search, closing a window, etc.).

So here’s an easy way to do that.

In this example, I’m creating an app-wide keystroke mapping for search functionality. When a user enters the keystroke of the letter “S” and the Ctrl key, I want to give focus to a search box that exists within the app.

First of all, here’s the app.js for my application:

Ext.application({
    name: "MyApp",
    appFolder: "app",
    autoCreateViewport:true,
    controllers: ["Search"....],
    launch: function() {
        var map = new Ext.util.KeyMap(Ext.getBody(), {
            key: 83,
            ctrl: true,
            handler: function() {
                 this.getController("Search").activatesearch();
            },
            More >