Adding keyboard shortcuts with the web UI framework

The Web UI Framework allows to you add keyboard shortcuts on the UI components. For example, you can add a keyboard shortcut like CTRL+ALT+s for the Search button in the Search panel.

Trigger keys are case insensitive. Pressing CTRl+ALT+S is the same as pressing CTRL+ALT+s.

To add a keyboard shortcut, you need to add the triggers config option when you are defining the config for that particular Ext component. The triggers config parameter contains the following properties:
  • triggerKey

    Sequence of keys that forms the shortcut key.

  • triggerFn

    Actions that need to be performed when shortcut key is pressed on that component. For example, use doSearch when you want the shortcut key to trigger a search.

  • triggerFnScope (Optional)

    Defines the scope in which the trigger function should be called. By default, the scope is the current component (this).

  • triggerKeySeparator (Optional)

    separator key to be used for separating the sequence if keys defined for the shortcut key. By default, “+” is used as the separator key.

For example, if you want to enable the CTRL + ALT + S shortcut key for the Search button in the Search panel. The config for the Search panel will look like this:

items: [{ 
             xtype: "panel", 
               . . . 
               . . . 
               . . . 
             }, 
             buttons: [{ 
                . . . 
                . . . 
                . . . 
                     handler: this.doSearch, 
                     scope: this 
              }] 
             triggers: [{ 
                 triggerkey: "Ctrl + Alt + s", 
                 triggerFn: this.doSearch, 
                 triggerFnScope: this, 
                 triggerKeySeparator: "+" 
              }] 
           }]

The triggers config parameter can contain an array of objects. For example, in the above example, if you want to define keyboard shortcut for the Reset button in the Search panel, the triggers config parameter will look like this:

triggers: [{ 
                 triggerkey: "Ctrl + Alt + s", 
                 triggerFn: this.doSearch, 
                 triggerFnScope: this, 
                 triggerKeySeparator: "+" 
              }, 
              { 
                 triggerkey: "Ctrl + Alt + r", 
                 triggerFn: this.doReset, 
                 triggerFnScope: this, 
                 triggerKeySeparator: "+" 
         }]