使用 ExtJS4 将关键事件侦听器添加到以编程方式生成的 MessageBox

Question

我正在构建一个 ExtJS4 网络应用程序，其中有一个部分向用户显示一个确认对话框，以确认用户是否想要完成该操作。我使用以编程方式生成的 MessageBox 询问用户，用户可以单击“是”或“否”。

这是我的代码：

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
        }
});

这按预期工作，程序根据用户选择（是或否）执行适当的操作。但是，我想添加一些功能，用户只需在键盘上按 Y 或 N，程序仍会像在对话框中实际按下 Yes 或 No 一样执行。

但是，我不知道如何将 KeyEvent 侦听器添加到 MessageBox，文档也没什么帮助。

Answer 1

检查 Ext.util.KeyMap (and Ext.EventObject 键常量），我们还必须将焦点设置在我们的 window 上以监听其上的 keyup 事件。

我创建了简单的 fiddle 来说明它是如何工作的 - Key map with message window。

这不是完整的解决方案，但我想您可以自己解决。作为一个简单的例子，您可以直接在按键上执行您的逻辑并将 myConfWindow 或 myConfWindow.down() 销毁到某个按钮和 "click" 它。但我想你想在你的应用程序的多个地方使用这个消息框，所以最好扩展 Ext.MessageWindow 并在那里添加键盘映射。

Answer 2

将此 set KeyMap For KeyPress Submit() 方法附加到您的消息框

'afterrender' : function() {
   var map = this.getKeyMapForKeyPressSubmit();
}

和方法

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

您可以通过getKeyMap获取MessageBox的按键映射。在 afterrender listener 中为其添加一个新的 key 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'
});

使用 ExtJS4 将关键事件侦听器添加到以编程方式生成的 MessageBox

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

extjs

extjs4

extjs4.2