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

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.

Answer 2

Attach this getKeyMapForKeyPressSubmit() method to your message box
'afterrender' : function() {
var map = this.getKeyMapForKeyPressSubmit();
}
And Method
getKeyMapForKeyPressSubmit : function (target, scope) {
var me = this;
return new Ext.util.KeyMap({
target : target,
binding : [{
key : 89, //Key for Y button - Ext.EventObject.Y
fn : function (key, e) {
//your logic for Yes button
}
}, {
key : 78, //Key for N button - Ext.EventObject.N
fn : function (key, e) {
//your logic for NO button
}
}
],
scope : scope
});
},

Answer 3

You can get a key map of MessageBox through getKeyMap. Add a new key listener to it in afterrender listener.
var myMsg = Ext.create('Ext.window.MessageBox', {
closeAction: 'destroy',
listeners: {
afterrender: function() {
this.getKeyMap().on(Ext.event.Event.Y, function() {
console.log("Yes");
}, this);
this.getKeyMap().on(Ext.event.Event.N, function() {
console.log("No");
}, this);
}
}
}).show({
title: 'Custom MessageBox Instance',
message: 'I can exist along with Ext.Msg'
});