事件和控制器：添加交互性

您创建的大多数应用程序都是交互式的，这意味着它们响应用户在用户界面中执行的操作。这种交互性的一些示例是用户单击按钮、从菜单中选择项目或在表单字段中键入文本。在所有这些情况下，应用程序必须能够执行两件事

1. 检测用户何时对视图执行了特定操作
2. 在该操作发生时执行一些代码

请记住，MVC 架构的基本原则是所有逻辑都在控制器或辅助类中。View 组件仅呈现 GUI；store、model 和 proxy 仅导入和存储数据。

有两种处理此类交互性的方法

• 事件绑定
• 控制器操作

这两种方法都有明显的优势，因此了解何时使用一种方法而不是另一种方法非常重要。本指南讨论如何在 Architect 中使用每种方法，以及如何选择使用哪种方法。

本指南中构建的已完成示例项目可以在 ExtSimpleExamples Git 存储库中找到。

让我们首先解决一个问题：即使这两种方法都生成有些相似的代码（如下所示），为什么您会使用一种提供交互性的方法而不是另一种方法。

事件绑定与控制器操作

Architect 完全拥抱 MVC 范例来构建应用程序，因为它促进和鼓励优雅的解耦架构。因此，在几乎所有情况下，我们都建议使用控制器操作来绑定到视图组件事件，而不是基本事件绑定。

主要区别如下

• 控制器操作： 如果您实现的行为与项目中顶级类中不存在的其他组件交互，这对于使用 Architect 构建应用程序的大多数情况来说是典型的，那么它通常属于控制器。

• 事件处理程序： 如果您实现的行为与“me”(this) 的所有子组件交互，那么它通常属于事件处理程序。换句话说，唯一可以接受使用基本事件绑定的时候是，当事件及其处理程序代码完全包含在单个视图中，并且不依赖于或影响应用程序的任何其他视图、模型或控制器时。换句话说，当视图触发的事件仅影响同一视图时，请使用基本事件绑定。下面显示的简单事件绑定实际上是一个很好的例子；按钮仅影响其父面板的大小，而不涉及应用程序的任何其他部分。

使用事件绑定

事件绑定，也称为事件侦听器，侦听用户对应用程序视图中的组件执行操作而触发的特定事件，然后调用该视图的方法函数。该函数传递一组特定于触发的事件类型/用户操作的参数。

让我们看一个非常简单的例子。假设您希望在用户切换按钮时更改面板的大小。

1. 创建一个 Ext JS 4.1 项目。
2. 向画布添加一个面板。
3. 将一个按钮作为面板的子项添加，并将按钮的 enableToggle 配置设置为“开”。
4. 通过单击“配置”面板中“事件绑定”项旁边的“+”图标，向按钮添加事件绑定。
5. 将事件绑定 name 配置设置为 toggle。请注意，Architect 自动为绑定提供了一个函数名称 (fn) “onButtonToggle”，但您可以将其更改为您想要的任何名称。

此时，您已创建了一个带有事件绑定的按钮，该绑定表示，当按钮切换时，应用程序调用 onButtonToggle 方法。Ext.button.Button#event-toggle 使用三个参数调用。对按钮组件的引用、当前是按下还是未按下状态，以及事件绑定上指定的任何额外选项。

现在我们需要添加代码来执行更改面板大小的所需操作。在检查器中找到事件绑定（当前标记为 toggle *onButtonToggle*），然后双击它以打开代码编辑器。Architect 在编辑器顶部显示处理程序的参数名称。插入以下代码

if (pressed) {
    this.setSize(100, 200);
} else {
    this.setSize(400, 250);
}

保存并预览项目，然后单击按钮；您将看到面板的大小在一种尺寸和另一种尺寸之间切换。

让我们检查 Architect 生成的代码来执行此操作

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.panel.Panel',

    height: 250,
    width: 400,
    title: 'My Panel',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'button',
                    enableToggle: true,
                    text: 'MyButton',
                    listeners: {
                        toggle: {
                            fn: me.onButtonToggle,
                            scope: me
                        }
                    }
                }
            ]
        });

        me.callParent(arguments);
    },

    onButtonToggle: function(button, pressed, options) {
        if (pressed) {
            this.setSize(100, 200);
        } else {
            this.setSize(400, 250);
        }
    }
});

您可以看到它在按钮组件上为 toggle 事件添加了一个侦听器，告诉它调用包含我们的处理程序代码的 onButtonToggle 方法。

另请注意，侦听器设置为在 me 变量的范围内执行，该变量引用顶级面板实例。Architect 始终将事件绑定设置为在定义它们的顶级 View 组件的范围内执行。这保证了处理程序代码中的 this 关键字始终引用定义处理程序方法的对象（而不是添加事件绑定的对象）。这也是示例处理程序代码中的 this.setSize() 调用更改面板大小而不是按钮大小的原因。

事件绑定也可以添加到不是视图组件的事物，例如数据存储或任何其他 Ext.util.Observable。

注意： 您无法在 Architect 中硬编码您自己的侦听器。

使用控制器

Sencha 的 MVC 架构 的关键部分，控制器提供了粘合剂，使应用程序的各种模型和视图协同工作，而无需具体了解彼此。这有助于保持应用程序各部分之间的严格解耦，并使每个单独的视图完全自包含。这导致应用程序更健壮、更模块化、更易于维护。

有关控制器的可用配置选项的详细信息，请参阅 控制器参考。

与事件绑定非常相似，控制器操作允许您的应用程序侦听特定视图组件上的特定命名事件并执行处理程序代码。控制器操作定义为控制器的一部分——而不是定义为特定目标组件的一部分。因此，您必须告诉控制器操作它应该侦听哪个组件（或哪些组件）。这通过为操作指定一个 controlQuery 来完成，controlQuery 是一个 [[ext: Ext.ComponentQuery]] 选择器，用于选择适当的目标组件。

让我们使用控制器操作重新创建我们的事件绑定示例。

1. 向画布添加一个面板，然后向面板添加一个按钮，并将其 enableToggle 配置切换为“开”。
2. 将按钮 itemId 配置设置为 sizeToggle，我们稍后将使用它。
3. 使用检查器中的“添加”按钮（“+”）向应用程序添加一个控制器。
4. 通过“配置”面板将控制器操作添加为该控制器的子项。出现提示时，选择 Ext.button.Button 作为其目标类型（这将设置操作的 targetType 配置），然后选择 toggle 作为其事件（操作的 name 配置）。targetType 和 name 的这种组合使 Architect 可以查找事件处理程序的正确参数。）
5. 接下来，设置控制器操作 controlQuery 配置，以便控制器知道如何定位我们的按钮。有许多可能的查询可以工作，但对于此示例，我们将使用基于先前设置的按钮 itemId 的查询。将 controlQuery 设置为 button#sizeToggle。“#”表示 id/itemId 查询。

最后添加处理程序代码。双击控制器操作（在检查器中命名为 toggle onButtonToggle）以打开代码编辑器，并添加以下代码

var panel = button.up('panel');
if (pressed) {
    panel.setSize(100, 200);
} else {
    panel.setSize(400, 250);
}

此代码与事件绑定版本略有不同。由于控制器处理程序在控制器的范围内而不是面板的范围内执行，因此我们不能使用“this”关键字，而是必须显式获取对面板的引用。

保存并预览您的项目，您将看到再次单击按钮会切换面板的大小。

这是 Architect 为控制器生成的代码

Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',

    onButtonToggle: function(button, pressed, options) {
        var panel = button.up('panel');
        if (pressed) {
            panel.setSize(100, 200);
        } else {
            panel.setSize(400, 250);
        }
    },

    init: function(application) {
        this.control({
            "button#sizeToggle": {
                toggle: this.onButtonToggle
            }
        });
    }
});

这看起来类似于为事件绑定生成的代码，主要区别在于侦听器是通过使用 controlQuery 作为键调用 this.control() 来设置的。

将事件绑定转换为控制器操作

如果您使用了简单的事件绑定并决定需要将其更改为控制器操作，Architect 为您提供了一种简便的方法来执行此操作。右键单击检查器中的事件绑定，突出显示“转换为操作 >”，然后选择现有控制器或“新建控制器”以告知 Architect 将新控制器操作放置在何处。Architect 使用原始事件绑定的值预填充控制器操作的 name 配置和处理程序代码。您必须手动填写 controlQuery 配置。