Add a Key Event Listener to a programmatically generated MessageBox using ExtJS4

Question

I am building an ExtJS4 web application and there's a part there where I show a confirmation dialog to a user to confirm if the user wants to push through with the action. I use a programmatically generated MessageBox to ask the user and the user can click Yes or No.

Here is my code:

Ext.MessageBox.show({
    title: alertHeader,
    msg: alertMessage,
    buttons: Ext.MessageBox.YESNO,
    icon: Ext.MessageBox.WARNING,
    cls: 'msgbox',
    fn: function(btn){
        //if user clicks yes, ask for override button
        console.log('btn value = ' + btn);
        if(btn ==='yes'){
        //more code here
        }
});

This works as intended, the program follows through with the appropriate actions based on the user selection (Yes or No). However, I want to add functionality wherein the user can simply press Y or N in the keyboard and the program will still execute as if Yes or No was actually pressed in the dialog.

However, I don't know how to go about adding a KeyEvent Listener to a MessageBox and the documentation is of little help.

Answer 1

Check Ext.util.KeyMap (and Ext.EventObject for key constants), also we have to set focus on our window to listen keyup events on it.

I create simple fiddle to illustrate how it works - Key map with message window.

Its not complete solution, but I guess rest you can do on your own. As simple example you can do your logic directly on keypress and destroy myConfWindow or myConfWindow.down() to certain button and "click" it. But I guess that you want to use this message box in multiple places in your app, so its better to extend Ext.MessageWindow and add keymap there.