使用 Sencha Touch 应用程序简介

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

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

应用程序的解剖

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

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

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

应用程序通常是您在 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 部分。

控制器

控制器是将应用程序粘合在一起的粘合剂。控制器侦听 UI 触发的事件并根据事件采取操作。使用控制器有助于保持代码的简洁性和可读性，并将视图逻辑与控制逻辑分开。

例如，假设您要求用户通过登录表单登录您的应用程序。在这种情况下，视图是具有所有字段和其他控件的表单。控制器应侦听表单提交 button 上的 tap 事件，并执行身份验证本身。任何时候我们处理数据或状态时，控制器应该是激活该更改的类，而不是视图。

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

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

一个简单的示例

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

• refs
• control

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

第二个配置是 control。与 ref 的配置类似，它使用 ComponentQuery 选择器查找包含 button 的所有 formpanel xtypes（例如，这会在我们假设的登录表单中找到提交按钮）。每当此类型的按钮触发其 tap 事件时，都会调用我们控制器的 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，所以控制器会自动生成一个 getLoginForm 函数，该函数返回与之匹配的 formpanel。一旦我们有了该表单引用，我们就会提取它的值（用户名和密码）并将它们传递给 authenticate 函数。这主要是控制器所做的 - 侦听触发的事件（通常由 UI 触发）并启动一些操作，在本例中进行身份验证。

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

存储

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

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

设备配置文件

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

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

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

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

    // as before
});

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

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。这是一个略微主观的判断，因为设备形状和尺寸是一个近乎连续的光谱，没有明确区分手机和平板电脑。由于没有安全的方法来确定哪些设备是平板电脑，哪些是手机，因此 Sencha Touch 的 Ext.os.is.Tablet 在 iPad 上运行时设置为 true，否则设置为 false。如果您需要更精细的控制，可以在 isActive 函数中轻松提供您喜欢的任何实现，只要它返回 true 或 false 即可。

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

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

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

大多数情况下，配置文件仅定义其他控制器和视图，因为模型和数据存储通常在应用程序的所有变体之间共享。有关配置文件的更详细讨论，请参阅 设备配置文件指南。

启动过程

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

除了应用程序启动功能之外，您还可以将应用程序启动逻辑放置在其他两个位置。首先，每个控制器都可以定义一个init函数，该函数在应用程序启动函数之前调用。其次，如果您使用的是设备配置文件，则每个配置文件都可以定义一个launch函数，该函数在控制器init函数之后调用，但在应用程序启动函数之前调用。

注意只有活动配置文件才调用其launch函数 - 例如，如果您为手机和平板电脑定义了配置文件，然后在平板电脑上启动应用程序，则仅调用平板电脑配置文件的launch函数。

启动顺序为

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

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

路由和历史记录支持

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

进一步阅读

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

• 控制器
• 设备配置文件