控制器

控制器负责响应应用程序中发生的事件。如果您的应用程序包含一个用户可以点击的注销按钮，则控制器会监听按钮的点击事件并采取适当的操作。虽然视图类处理数据的显示，而模型类处理数据的加载和保存，但控制器类是将视图和模型绑定在一起的粘合剂。

与 Ext.app.Application 的关系

控制器存在于应用程序的上下文中。应用程序通常由多个控制器组成，每个控制器处理应用程序的特定部分。例如，处理在线购物网站订单的应用程序可能具有订单、客户和产品控制器。

应用程序使用的所有控制器都在应用程序的控制器配置中指定。应用程序会自动实例化每个控制器并保留对每个控制器的引用，因此在大多数情况下，您无需直接实例化控制器。根据约定，每个控制器的名称以它管理的实体（通常是模型）命名，通常是复数形式 - 例如，如果您的应用程序名为“MyApp”，并且您有一个管理产品的控制器，则约定是在文件 app/controller/Products.js 中创建一个 MyApp.controller.Products 类。

启动

应用程序启动过程中有四个主要阶段，其中两个与控制器相关。首先，每个控制器都可以定义一个init函数，该函数在应用程序启动函数之前调用。其次，在应用程序和配置文件启动函数被调用后，作为该过程的最后阶段，将调用控制器的启动函数，如下所示

1. 调用 Controller#init 函数
2. 调用 Profile#launch 函数
3. 调用 Application#launch 函数
4. 调用 Controller#launch 函数

大多数情况下，特定于控制器的启动逻辑应放入控制器的启动函数中。由于控制器的启动函数是在应用程序和配置文件启动函数之后调用的，因此此时应已设置应用程序的初始 UI。如果您需要在应用程序启动之前执行一些特定于控制器的处理，则可以实现控制器 init 函数。

Refs 和 Control

控制器的核心是双重配置refs和control。这些用于获取应用程序中组件的引用，并根据它们触发的事件对它们执行操作。在以下部分中，我们首先了解refs配置。

Refs

Refs 利用强大的ComponentQuery语法轻松找到页面上的组件。对于每个控制器，我们可以根据需要定义任意数量的 refs，例如在以下示例中，我们定义了一个名为“nav”的 ref，该 ref 在页面上查找具有“mainNav”ID 的组件。然后我们在后续的 addLogoutButton 函数中使用该 refs，如本示例所示

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

    config: {
        refs: {
            nav: '#mainNav'
        }
    },

    addLogoutButton: function() {
        this.getNav().add({
            text: 'Logout'
        });
    }
});

通常，ref 只是一个键/值对 - 键（本例中为“nav”）是要生成的引用的名称，而值（本例中为“#mainNav”）是用于查找组件的ComponentQuery选择器。

然后，我们创建了 addLogoutButton 函数，该函数通过其生成的“getNav”函数使用此 ref。此 getter 函数会根据您定义的 refs 自动生成，并且始终遵循相同的格式 - “get”，后跟大写的 ref 名称。在本例中，我们将 nav 引用视为Toolbar，并在调用我们的函数时向其中添加了一个 Logout 按钮。此 ref 将识别以下工具栏

Ext.create('Ext.Toolbar', {
    id: 'mainNav',

    items: [
        {
            text: 'Some Button'
        }
    ]
});

假设在运行“addLogoutButton”函数时已经创建了此工具栏（稍后我们将看到如何调用它），它将获得添加到其中的第二个按钮。

高级 Refs

除了名称和选择器之外，还可以向 Refs 传递其他选项。这些选项是 autoCreate 和 xtype，它们几乎总是同时使用

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

    config: {
        refs: {
            nav: '#mainNav',

            infoPanel: {
                selector: 'tabpanel panel[name=fish] infopanel',
                xtype: 'infopanel',
                autoCreate: true
            }
        }
    }
});

我们已向控制器添加了第二个 ref。同样，名称是键，本例中为“infoPanel”，但这次我们已将对象作为值传递。这次我们使用了一个更复杂的 selector 查询 - 假设您的应用程序包含一个选项卡面板，并且选项卡面板中的一个项目名为“fish”。前面指定的 selector 匹配选项卡面板项目中具有“infopanel”xtype 的任何组件。

此处的区别在于，如果 infopanel 尚未在“fish”面板中存在，则在您在控制器中运行 this.getInfoPanel 时将自动创建它。控制器能够创建 infopanel 组件，因为我们提供了用于实例化它的 xtype，以防选择器未返回任何内容。

Control

与refs相关的配置是control。Control是控制器侦听应用程序组件触发的事件并以某种方式做出反应的手段。Control 配置接受 ComponentQuery 选择器和 refs 作为其键，并接受侦听器对象作为值，如下例所示

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

    config: {
        control: {
            loginButton: {
                tap: 'doLogin'
            },
            'button[action=logout]': {
                tap: 'doLogout'
            }
        },

        refs: {
            loginButton: 'button[action=login]'
        }
    },

    doLogin: function() {
        // called whenever the Login button is tapped
    },

    doLogout: function() {
        // called whenever any Button with action=logout is tapped
    }
});

在前面的示例中，我们设置了两个控制声明 - 一个用于 loginButton ref，另一个用于已赋予“logout”操作的任何按钮。对于每个声明，我们都传递了一个事件处理程序 - 在每种情况下都侦听“tap”事件 - 并指定了在该按钮触发 tap 事件时应调用的操作。请注意，我们在控制块中将“doLogin”和“doLogout”方法都指定为字符串 - 这一点很重要。

在每个控制声明中，您可以侦听任意数量的事件，并混合匹配 ComponentQuery 选择器和 refs 作为键。

Routes

从 Sencha Touch 开始，控制器可以直接指定它们感兴趣的路由。这使我们能够在应用程序中提供历史记录支持，以及深度链接到我们提供路由的应用程序的任何部分。

例如，让我们假设我们有一个负责登录和查看用户配置文件的控制器，并且希望通过 url 访问这些屏幕。我们可以按如下方式实现

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

    config: {
        routes: {
            'login': 'showLogin',
            'user/:id': 'showUserById'
        },

        refs: {
            main: '#mainTabPanel'
        }
    },

    // uses our 'main' ref above to add a loginpanel to our main TabPanel (note that
    // 'loginpanel' is a custom xtype created for this application)
    showLogin: function() {
        this.getMain().add({
            xtype: 'loginpanel'
        });
    },

    // Loads the User then adds a 'userprofile' view to the main TabPanel
    showUserById: function(id) {
        MyApp.model.User.load(id, {
            scope: this,
            success: function(user) {
                this.getMain().add({
                    xtype: 'userprofile',
                    user: user
                });
            }
        });
    }
});

之前指定的路由将浏览器地址栏的内容映射到在匹配路由时调用的控制器函数。路由可以是简单的文本，例如登录路由，它与 http://myapp.com/#login 匹配，或者可能包含通配符，例如“user/:id”路由，它与 http://myapp.com/#user/123 等 URL 匹配。每当地址发生更改时，控制器都会自动调用指定函数。

请注意，showUserById 函数必须首先加载 User 实例。每当您使用路由时，由该路由调用的函数完全负责加载其数据并恢复状态。这是因为用户可以将该 URL 发送给其他人，或者可以简单地刷新页面，这将清除您已加载的任何缓存数据。在应用程序架构指南中，您可以找到关于使用路由恢复状态的更深入讨论。

过滤器之前

控制器在路由上下文中提供的附加功能是定义在路由中指定的函数之前运行的过滤器函数的能力。这些是验证或授权用户执行特定操作或加载页面上尚未存在的类的绝佳位置。例如，假设我们希望在允许用户在电子商务后端应用程序中编辑产品之前对其进行身份验证

Ext.define('MyApp.controller.Products', {
    config: {
        before: {
            editProduct: 'authenticate'
        },

        routes: {
            'product/edit/:id': 'editProduct'
        }
    },

    // this is not directly because our before filter is called first
    editProduct: function() {
        //... performs the product editing logic
    },

    // this is run before editProduct
    authenticate: function(action) {
        MyApp.authenticate({
            success: function() {
                action.resume();
            },
            failure: function() {
                Ext.Msg.alert('Not Logged In', "You can't do that, you're not logged in");
            }
        });
    }
});

每当用户导航到 http://myapp.com/#product/edit/123 等 URL 时，将调用控制器的 authenticate 函数，并向其传递如果之前没有过滤器，则将执行的 Ext.app.Action。Action 仅表示控制器函数（在本例中为 editProduct）和其他数据，例如从 URL 中解析的 ID。

过滤器可以执行它需要的任何类型的处理，无论是同步还是异步。在本例中，我们使用应用程序的 authenticate 函数来验证用户当前是否已登录。由于这可能需要 AJAX 请求来检查服务器上的用户凭据，因此它以异步方式运行 - 如果身份验证成功，我们将通过调用 action.resume() 继续操作，如果没有，我们会告诉用户他需要先登录。

过滤器之前还可以用于在执行某些操作之前加载其他类。例如，如果某些操作很少使用，您可能希望推迟加载它们的源代码，直到需要它们为止，以便应用程序启动得更快。要实现此目的，您只需设置一个使用 Ext.Loader 按需加载代码的过滤器。

可以为每个操作指定任意数量的过滤器之前，要使用多个过滤器，只需传入一个数组

Ext.define('MyApp.controller.Products', {
    config: {
        before: {
            editProduct: ['authenticate', 'ensureLoaded']
        },

        routes: {
            'product/edit/:id': 'editProduct'
        }
    },

    // this is not directly because our before filter is called first
    editProduct: function() {
        //... performs the product editing logic
    },

    // this is the first filter that is called
    authenticate: function(action) {
        MyApp.authenticate({
            success: function() {
                action.resume();
            },
            failure: function() {
                Ext.Msg.alert('Not Logged In', "You can't do that, you're not logged in");
            }
        });
    },

    // this is the second filter that is called
    ensureLoaded: function(action) {
        Ext.require(['MyApp.custom.Class', 'MyApp.another.Class'], function() {
            action.resume();
        });
    }
});

按顺序调用过滤器，每个过滤器都必须调用 action.resume() 以继续处理。

特定于配置文件的控制器

超类，共享内容

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

    config: {
        routes: {
            'login': 'showLogin'
        },

        refs: {
            loginPanel: {
                selector: 'loginpanel',
                xtype: 'loginpanel',
                autoCreate: true
            }
        },

        control: {
            'logoutbutton': {
                tap: 'logout'
            }
        }
    },

    logout: function() {
        // code to close the user's session
    }
});

手机控制器

Ext.define('MyApp.controller.phone.Users', {
    extend: 'MypApp.controller.Users',

    config: {
        refs: {
            nav: '#mainNav'
        }
    },

    showLogin: function() {
        this.getNav().setActiveItem(this.getLoginPanel());
    }
});

平板电脑控制器

Ext.define('MyApp.controller.tablet.Users', {
    extend: 'MyApp.controller.Users',

    showLogin: function() {
        this.getLoginPanel().show();
    }
});