Sencha Touch 应用程序简介

Sencha Touch 针对构建跨多个平台工作的应用程序进行了优化。为了尽可能简化应用程序的编写，我们提供了一个简单而强大的应用程序架构，该架构利用了模型-视图-控制器 (MVC) 模式。这种方法使您的代码保持清晰、可测试且易于维护，并在编写应用程序时为您提供许多好处

• 历史记录支持：使您可以使用后退按钮支持在应用程序中导航，并访问可以链接到的应用程序的任何部分
• 深度链接：使您能够共享深度链接，这些链接可以像链接到网页一样打开应用程序中的任何屏幕
• 设备 Profiles（配置文件）：使您能够轻松地为手机、平板电脑和其他设备自定义应用程序的 UI，同时共享通用代码

应用程序的结构

应用程序是 Models（模型）、Views（视图）、Controllers（控制器）、Stores（数据存储）和 Profiles（配置文件）的集合，以及应用程序相关实体的其他元数据，例如应用程序图标和启动屏幕图像。

注意 在本指南中，Application 表示 Ext.application 的实例，而 application 或 app 是您正在编码的程序。

• Models（模型）：表示应用程序中的一种数据对象 - 例如，电子商务应用程序可能具有 User（用户）、Product（产品）和 Order（订单）的模型
• Views（视图）：负责向用户显示数据，并利用 Sencha Touch 中的内置组件
• Controllers（控制器）：通过监听用户交互（例如点击和滑动）并采取相应操作来处理与应用程序的交互
• Stores（数据存储）：负责将数据加载到应用程序中，并为 Lists（列表）和 DataViews（数据视图）等组件提供支持
• Profiles（配置文件）：使您能够轻松地为平板电脑和手机自定义应用程序的 UI，同时尽可能多地共享代码

Application 通常是您在 Sencha Touch 应用程序中定义的第一个实体，例如

Ext.application({
    name: 'MyApp',
    models: ['User', 'Product', 'nested.Order'],
    views: ['OrderList', 'OrderDetail', 'Main'],
    controllers: ['Orders'],

    launch: function() {
        Ext.create('MyApp.view.Main');
    }
});

name（名称） 用于为您的整个应用程序创建一个全局命名空间，包括其所有模型、视图、控制器和其他类。例如，名为 MyApp 的应用程序应使其组成类遵循模式 MyApp.model.User、MyApp.controller.Users、MyApp.view.Main 等。这使整个应用程序保持在单个全局变量下，从而最大限度地减少同一页面上的其他代码与其冲突的机会。

应用程序使用定义的 models（模型）、views（视图） 和 controllers（控制器） 配置自动将这些类加载到您的应用程序中。这些类遵循简单的文件结构约定 - 模型预计在 app/model 目录中，控制器在 app/controller 目录中，视图在 app/view 目录中 - 例如 app/model/User.js、app/controllers/Orders.js 和 app/view/Main.js。

请注意，我们之前指定的 models（模型） 之一与其他模型不同，因为我们指定了它的完整类名 (“MyApp.model.nested.Order”)。如果我们不遵循正常的命名约定，我们可以为这些配置中的任何一个指定完整的类名。有关如何指定自定义依赖项的详细信息，请参阅 Ext.app.Application 文档的 Dependencies（依赖项） 部分。

Controllers（控制器）

Controllers（控制器）是将应用程序绑定在一起的粘合剂。Controllers（控制器）监听 UI 触发的事件，并根据事件采取操作。使用 Controllers（控制器）有助于保持代码清晰易读，并将视图逻辑与控制逻辑分开。

例如，假设您需要用户通过登录表单登录到您的应用程序。在这种情况下，视图是包含所有字段和其他控件的表单。控制器应监听表单提交 button（按钮） 上的 tap（点击） 事件，并执行身份验证本身。每当我们处理操作数据或状态时，控制器都应该是激活该更改的类，而不是视图。

Controllers（控制器）公开了一小部分但功能强大的功能，并遵循一些简单的约定。应用程序中的每个 Controller（控制器）都是 Ext.app.Controller 的子类 - 尽管您可以对现有 Controller（控制器）进行子类化，只要它们在某个时候从 Ext.app.Controller 继承即可。Controllers（控制器）存在于 MyApp.controller.* 命名空间中。例如，如果您的应用程序具有 Sessions（会话）控制器，则它将被称为 MyApp.controller.Sessions，并且将存在于文件 app/controller/Sessions.js 中。

尽管每个 Controller（控制器）都是 Ext.app.Controller 的子类，但每个 Controller（控制器）都仅由加载它的 Application（应用程序） 实例化一次。在任何时候，每个 Controller（控制器）只有一个实例，并且 Controller（控制器）实例集由 Application（应用程序）在内部管理。使用应用程序的 controllers（控制器） 配置（如前所示）加载所有 Controller（控制器）并自动实例化它们。

一个简单的例子

以下是我们如何快速定义之前描述的 Sessions（会话）控制器。我们正在使用两个 Controller（控制器）配置

• refs
• control

Refs 是一种在页面上查找 Components（组件）的简便方法 - 在本例中，Controller（控制器）查找所有与 formpanel xtype 匹配的 Components（组件），并将找到的第一个 Components（组件）分配给 loginForm 属性。我们随后在 doLogin 函数中使用该属性。

第二个配置是 control。与 ref 的配置类似，这使用 ComponentQuery 选择器来查找包含 button 的所有 formpanel xtypes（例如，这会在我们假设的登录表单中找到“提交”按钮）。每当这种类型的按钮触发其 tap（点击） 事件时，都会调用 Controller（控制器）的 doLogin 函数

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

    config: {
        refs: {
            loginForm: 'formpanel'
        },
        control: {
            'formpanel button': {
                tap: 'doLogin'
            }
        }
    },

    doLogin: function() {
        var form   = this.getLoginForm(),
            values = form.getValues();

        MyApp.authenticate(values);
    }
});

doLogin 函数本身很简单。因为我们定义了 loginForm ref，所以 Controller（控制器）会自动生成一个 getLoginForm 函数，该函数返回它匹配的 formpanel。一旦我们有了该表单引用，我们就会提取其值（用户名和密码）并将它们传递给 authenticate 函数。这主要是 Controller（控制器）所做的事情 - 监听触发的事件（通常由 UI 触发）并启动某些操作，在本例中为身份验证。

有关 Controllers（控制器）及其功能的更多信息，请参阅 controllers 指南。

Stores（数据存储）

Stores（数据存储）是 Sencha Touch 的重要组成部分，并为大多数数据绑定小部件提供支持。最简单地说，Store（数据存储）不过是 Model（模型）实例的数组。数据绑定 Components（组件），例如 [[touch:Ext.List List} 和 DataView
为 Store（数据存储）中包含的每个 Model（模型）实例呈现一个项目。当从 Store（数据存储）添加或删除 Model（模型）实例时，会触发事件，数据绑定 Components（组件）会监听这些事件并使用它们来更新自身。

有关 Stores（数据存储）、它们如何与应用程序中的 Components（组件）配合使用以及您应该注意的与 Application（应用程序） 实例的特定集成点的更多信息，请参阅 Stores 指南。

设备 Profiles（配置文件）

Sencha Touch 在各种具有不同功能和屏幕尺寸的设备上运行。在平板电脑上运行良好的用户界面在手机上可能无法很好地工作，反之亦然，因此为不同的设备类型提供自定义视图是有意义的。但是，我们不想为了提供不同的 UI 而不得不多次编写我们的应用程序，但我们希望尽可能多地共享代码。

设备 Profiles（配置文件）是简单的类，使您能够定义应用程序支持的不同类型的设备以及应如何以不同方式处理它们。它们是可选的，这意味着您可以首先在没有配置文件的情况下开发应用程序，然后在以后添加它们，或者根本不使用它们。每个配置文件仅定义一个 isActive 函数，如果该配置文件应在当前设备上处于活动状态，则该函数应返回 true，以及一组附加的 models（模型）、views（视图） 和 controllers（控制器），如果检测到该配置文件，则加载这些模型、视图和控制器。

要向您的应用程序添加 Profile（配置文件）支持，您需要告知您的 Application（应用程序）有关 Profiles（配置文件）的信息，并为每个配置文件创建 Ext.app.Profile 子类，例如

Ext.application({
    name: 'MyApp',
    profiles: ['Phone', 'Tablet']

    // as before
});

通过定义 Phone（手机）和 Tablet（平板电脑）配置文件，Application（应用程序）加载 app/profile/Phone.js 和 app/profile/Tablet.js 文件。让我们假设平板电脑版本的应用程序支持其他功能，例如管理组。此示例说明如何定义 Tablet（平板电脑）配置文件

Ext.define('MyApp.profile.Tablet', {
    extend: 'Ext.app.Profile',

    config: {
        controllers: ['Groups'],
        views: ['GroupAdmin'],
        models: ['MyApp.model.Group']
    },

    isActive: function() {
        return Ext.os.is.Tablet;
    }
});

每当应用程序在 Sencha Touch 确定为平板电脑的设备上运行时，isActive 函数都会返回 true。这是一个略带主观的确定，因为设备形状和尺寸几乎是连续的，手机和平板电脑之间没有明显的区别。由于没有安全的方法来说明哪些设备是平板电脑，哪些设备是手机，因此当在 iPad 上运行时，Sencha Touch 的 Ext.os.is.Tablet 设置为 true，否则设置为 false。如果您需要更精细的控制，则可以在 isActive 函数内部轻松提供您喜欢的任何实现，只要它返回 true 或 false 即可。

您应确保只有一个 Profile（配置文件）从其 isActive 函数返回 true。如果多个配置文件返回 true，则仅使用第一个配置文件，其余配置文件将被忽略。第一个返回 true 的配置文件设置 Application（应用程序）的 currentProfile，您可以随时查询它。

如果检测到的 currentProfile 定义了其他模型、视图、控制器和数据存储，则这些模型、视图、控制器和数据存储将与 Application（应用程序）本身上定义的所有 models（模型）、views（视图） 和 controllers（控制器） 一起自动加载。但是，除非提供了完全限定的类名，否则 Profile（配置文件）中命名的所有依赖项都以 Profile（配置文件）名称作为前缀。例如

• views: ['GroupAdmin'] 加载 app/view/tablet/GroupAdmin.js
• controllers: ['Groups'] 加载 app/controller/tablet/Groups.js
• models: ['MyApp.model.Group'] 加载 app/model/Group.js

大多数情况下，Profile 仅定义额外的控制器和视图，因为模型和 store 通常在应用程序的所有变体之间共享。有关 Profile 的更详细讨论，请参阅设备 Profile 指南。

启动过程

每个应用程序都可以定义一个 launch 函数，该函数在应用程序的所有类都已加载并且应用程序准备好启动后立即调用。这通常是放置任何应用程序启动逻辑的最佳位置，通常是为您的应用程序创建主视图结构。

除了 Application launch 函数之外，还有两个其他地方可以放置应用程序启动逻辑。首先，每个 Controller 都可以定义一个 init 函数，该函数在 Application launch 函数之前调用。其次，如果您正在使用设备 Profile，则每个 Profile 都可以定义一个 launch 函数，该函数在 Controller init 函数之后，但在 Application launch 函数之前调用。

注意 只有活动的 Profile 会调用其 launch 函数 - 例如，如果您为 Phone 和 Tablet 定义了 profile，然后在平板电脑上启动应用程序，则只会调用 Tablet Profile 的 launch 函数。

启动顺序是

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

当使用 Profile 时，通常将大部分启动逻辑放在 Profile launch 函数中，因为每个 Profile 都有不同的视图集需要在启动时构建。

路由和历史记录支持

Sencha Touch 具有完整的路由和历史记录支持。包括 Kitchen Sink 应用程序在内的几个 SDK 示例都使用历史记录支持来启用后退按钮，以便轻松在屏幕之间导航。这在 Android 设备上尤其有用。

进一步阅读

以下指南提供了有关使用 Sencha Touch 应用程序架构的更多信息

• 控制器
• 设备 Profile