Capture function key events (F1-F12) with ExtJS

Question

How can I listen for key-press events on function keys ( F1, F2, F3 etc. ) with ExtJS?

I am trying to activate a trigger field with the F8 key.

I've tried overriding the isSpecialKey method in order to add a "specialKey" event with no success - I've also tried to use Key.map but that did not trigger anything either.

Can anyone point me in the right direction?

Answer 1

You can check the key-code of the event against the known key-code for a particular function key. For convenience these exist as pre-defined static variables on the Ext.event.Event class in version 5.x and Ext.EventObject in version 4.x (in either case the class / prototype is accessible via the self property on the event instance itself).

Ext.getBody().on('keydown', function(ev){
    if(ev.getKey() === ev.self.F8)
        Ext.Msg.show({ msg: 'F8 pressed!' });
});

» Fiddle - note that the component you attach the listener to should have focus.
                (in this example the application window)