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

【问题标题】：ExtJS 4 how to properly create a KeyMap for a window when using MVCExtJS 4 如何在使用 MVC 时为窗口正确创建 KeyMap
【发布时间】：2011-11-23 19:25:46
【问题描述】：

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

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

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

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

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

我尝试了各种方法，但我遇到的基本问题是在哪里放置用于创建键盘映射的代码，以及如何将其绑定到适当的实例。

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

那么，您将如何从控制器中为其视图（窗口）创建一个键映射（或？），并在按下回车键时调用本地方法（this.loginButtonClick）？

【问题讨论】：

标签： model-view-controller extjs keymapping

【解决方案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 键，则加载对话框时，它应该执行您的功能。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

希望这会有所帮助。

【讨论】：