控制器

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

与 Ext.app.Application 的关系

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

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

启动

应用程序的启动过程分为四个主要阶段，其中两个阶段与 Controller 相关。首先，每个 Controller 都可以定义一个 init 函数，该函数在 Application launch 函数之前调用。其次，在 Application 和 Profile launch 函数被调用之后，作为该过程的最后一个阶段，Controller 的 launch 函数被调用，如下所示

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

大多数情况下，您的 Controller 特定启动逻辑应放入 Controller 的 launch 函数中。由于 controller 的 launch 函数在 Application 和 Profile launch 函数之后调用，因此预计应用程序的初始 UI 在此时已就位。如果您需要在应用程序启动之前执行一些 Controller 特定处理，则可以实现 Controller init 函数。

Refs 和 Control

Controllers 的核心是双重配置 refs 和 control。这些用于获取对应用程序内部 Components 的引用，并根据它们触发的事件对它们采取操作。在以下部分中，我们首先查看 refs 配置。

Refs

Refs 利用强大的 ComponentQuery 语法来轻松定位页面上的 Components。对于每个 Controller，我们可以根据需要定义任意数量的 refs，例如，在以下示例中，我们定义一个名为“nav”的 ref，该 ref 在页面上查找 ID 为“mainNav”的 Component。然后，我们在随后的 addLogoutButton 函数中使用该 ref，如此示例所示

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

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

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

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

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

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

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

假设此 Toolbar 在我们运行“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
            }
        }
    }
});

我们向 Controller 添加了第二个 ref。同样，名称是键，在本例中为“infoPanel”，但这次我们传递了一个对象作为值。这次我们使用了更复杂的选择器查询 - 想象一下您的应用程序包含一个 tab panel，并且选项卡面板中的一个项目名为“fish”。先前指定的选择器匹配选项卡面板项中任何具有“infopanel”xtype 的 Component。

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

Control

与 refs 相关的配置是 control。Control 是 Controller 监听应用程序 Components 触发的事件并以某种方式做出反应的方式。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
    }
});

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

在每个 control 声明中，您可以根据需要监听任意数量的事件，并将 ComponentQuery 选择器和 refs 混合并匹配作为键。

路由

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

例如，假设我们有一个 Controller 负责登录和查看用户个人资料，并希望使这些屏幕可通过 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
                });
            }
        });
    }
});

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

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

Before Filters (前置过滤器)

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

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 时，将调用 Controller 的 authenticate 函数，并将 Ext.app.Action 传递给它，如果不存在前置过滤器，则将执行该 Ext.app.Action。Action 只是表示 Controller 函数（在本例中为 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();
    }
});