How to implement accesskey on ExtJs tabs?

Question

I have implemented scrollable extjs tab panel in our product. But I also need to support accesskey functionality. For example, an "Alt + P" keystroke will open up one of tab. Does anyone have any experience about implementing this?

Answer 1

The core to this is creating a keymap to recognise you are pressing a combination of keys, once this is detected you can then add a custom handler.

See here: http://dev.sencha.com/deploy/dev/docs/?class=Ext.KeyMap

eg:

var map = new Ext.KeyMap("my-element", [
    {
        key: [10,13],
        fn: function(){ alert("Return was pressed"); }
    }, {
        key: "abc",
        fn: function(){ alert('a, b or c was pressed'); }
    }, {
        key: "\t",
        ctrl:true,
        shift:true,
        fn: function(){ alert('Control + shift + tab was pressed.'); }
    }
]);

Above are a number of sample mappings, you simply replace 'my-element' with the element you wish to look for the key presses on (so which element when selected will detect them). If you wish to have APPLICATION wide key mapping, this element should either be the body of the page, the window itself or the ExtJS Viewport (if you are using one) / Master element. This will mean you can be within any area of your application and the keypress is detected. The subsequent behaviour you define under the 'fn' property (i.e. change tab etc)...