ExtJS 4 如何在使用 MVC 时正确为窗口创建 KeyMap

Question

我有一个简单的 ExtJS 应用程序，它是 MVC 风格编写的（我的大部分信息来自 此处）。

我的应用程序创建一个视口，并有一个带有表单、一些字段和一个按钮的视图。

该应用程序有一个具有“loginButtonClick”功能的控制器，并且该控制器通过以下方式监视单击事件：

this.control({
 'loginwindow button[action=save]': {
   click: this.loginButtonClick
 }
}

效果很好，但是现在当显示登录窗口时，我希望回车键也执行loginButtonClick方法。

我已经尝试过各种各样的事情，但我遇到的基本问题是在哪里放置用于创建键盘映射的代码，以及如何将其绑定到正确的实例，

例如，如果我在控制器中创建键盘映射（这是我的偏好）。 ，我需要得到该控制器的特定视图实例（我可能会打开多个相同类型的窗口），

那么，您如何从控制器内为其视图（窗口）创建键映射（或？），调用本地方法（此）。 .loginButtonClick) 当按下回车键时？

Answer 1

您可以做的是将初始化 keyMap 的代码绑定到登录窗口 afterrender 事件，如下所示：

this.control{(
   'loginwindow' : {
      afterrender: this.initializeKeyMap
 }

然后创建一个设置 keyNav 的函数：

initializeKeyMap: function(window, options) {
   this.keyNav = Ext.create('Ext.util.KeyNav', window.el, {
         enter: this.loginButtonClick,
         scope: this
   });           
}

现在，当加载对话框时，如果用户按 Enter 键，它应该执行您的函数。

Answer 2

您可以在窗口渲染事件中设置所有这些内容。因此，当它呈现时，您为输入键添加一个事件侦听器，并在您以编程方式调用的处理程序中单击登录按钮。

Answer 3

您可以通过将以下侦听器添加到表单中的文本/密码字段来实现此目的，

listeners: {
    specialkey: function(field, e){
        if (e.getKey() == e.ENTER) {
            var form = this.up('form').getForm();
            submitLoginForm(form);
        }
    }
}

这里“form”是您的表单，“submitLoginForm”是在表单提交时调用的函数，我猜在您的情况下是loginButtonClick。

希望这有帮助。