使用类

类系统是 Ext JS 和 Sencha Touch 框架最强大的功能之一。它为您的 JavaScript 应用程序带来了经典继承的结构、灵活性和可重用性。此类系统是所有 Ext JS 应用程序的基础。

有关更多背景信息，请参阅以下指南

• Ext JS 类系统

Architect 生成标准 Ext JS 代码，因此它也支持类系统。Architect 还提供了一些设施，用于在您的应用程序中重用类。

本文档介绍

• Architect 如何在生成代码中处理类
• 如何创建您自己的自定义类
• 如何使用链接实例在整个应用程序中重用自定义组件；当您修改链接实例时，修改将在整个应用程序中应用。
• 如何使用提升到类将子组件提升到与原始子组件关联的类。
• 如何使用 createAlias 和 createClass 在不使用代码覆盖的情况下将自定义代码插入组件。
• 如何将组件及其所有配置保存到工具箱，以便将其拖动到您在 Architect 中开发的任何应用程序的另一个部分。
• 如何将组件及其所有配置导出到文件，以及如何将此组件导入另一个项目。

以一种可以重复使用代码的方式构建应用程序是创建可维护软件的基本要素。Sencha Architect 帮助您将应用程序细分为可重复使用的类。

Architect 检查器中的每个顶级实例都表示一个类。

Architect 使您能够从上到下或从下到上构建应用程序。如果您从单个视图容器开始，则以后您将需要分解应用程序的部分（通过提升到类）。如果您通过专注于构建各个特定屏幕来开始设计应用程序，然后希望稍后组装它，则可以使用链接实例来完成此操作。

从 Sencha Architect 3.0 开始，您还可以创建一个用户扩展包，其中包含一个或多个类。这可以自行发布，然后导入到其他项目中；安装后，用户扩展组件可以从工具箱拖动到任何兼容的项目。有关创建用户扩展包的更多信息，请参阅创建用户扩展。

顶级项目是类

当您将项目从工具箱添加到项目中时，在控制器、视图、存储或模型检查器节点中添加为顶级项目的所有内容都将成为生成的应用程序代码中的类。例如，如果您将面板从工具箱拖动到画布的空白区域或检查器中的视图节点，那么为该面板生成的代码看起来如下所示

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',
                    text: 'MyButton'
                }
            ]
        });
        me.callParent(arguments);
    }
});

这是一个使用类系统的define API 的标准类。当您保存项目时，Architect 将为该类生成一个单独的文件 app/view/MyPanel.js。

让我们更详细地分解此生成的代码。

Ext.define('MyApp.view.MyPanel', {

此行在 MyApp.view 命名空间中定义了一个名为 MyPanel 的类。根据 Sencha 的模型-视图-控制器 (MVC) 包的约定，所有视图组件都会自动放入此命名空间。名称 MyPanel 由 Architect 自动生成，但您可以通过修改配置面板中的 userClassName 属性来选择自己的类名。建议您选择适合应用程序中类的类名。

extend: 'Ext.panel.Panel',

这指定类继承 Ext JS 标准 Ext.panel.Panel 类的基本配置和实现。此值由 Architect 根据创建组件的工具箱类型生成。只能通过其上下文菜单中的转换列表将组件转换为另一种类型来更改它。（注意：请参阅以下有关自定义类的部分，了解如何扩展未出现在工具箱中的类。）

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

您的类的简单配置属性显示在此处。仅显示您指定的且与其父类的继承默认值不匹配的值。

initComponent: function() {
    var me = this;
    Ext.applyIf(me, {
        //...
    });
    me.callParent(arguments);
}

复杂配置（例如对象字面量和子项目配置——任何不应在实例之间共享的内容）显示在此处。

方法

除了配置属性之外，您还可以通过将基本函数从工具箱拖动到类上或单击配置面板中函数项目旁边的添加按钮（“+”）将实例方法添加到类。为结果函数指定名称和可选参数，然后双击它以打开 Architect 代码编辑器并编辑其实现代码。

同样，您可以使用静态函数工具箱项目将静态方法添加到类。

高级类配置

以下类配置属性也可以在任何顶级类项目上设置；这些是高级配置，只有在您对 Architect 和框架有高级知识时才应修改。

• alternateClassName
• Mixins
• Requires
• Singleton
• Uses

类加载

Sencha 类系统的另一个组成部分是动态类加载器。由于 Architect 在单独的 JavaScript 文件中生成您的类，因此必须声明应用程序的每个类，以便框架知道加载它们。

为了简化此流程，Architect 会自动将大部分顶级类添加到 Application 节点的 config 中的 Controllers、Views、Stores 和 Models 数组中。这些列表中的所有类都会在应用启动时加载。如果您愿意，也可以将各个类添加到各个控制器中对应的数组中。Architect 为您提供了从 Application 节点中移除类的选项。

某些类可能不会自动添加到这些列表中，在这种情况下，您需要将它们手动添加到 Application 节点或使用它们的特定控制器、视图、模型或存储类的 requires config 中。

自定义类

虽然此处描述的功能支持从工具箱中的受支持项创建类，但有时您可能需要创建一个纯父类或扩展工具箱中未出现的另一个类的类。您可以在 Architect 中使用工具箱中的 Class 项或在 Project Inspector 顶部单击“+”号时显示的下拉列表中的“Class”项来执行此操作。

可以将自定义类添加到 Controllers、Views、Stores 或 Models Inspector 节点。自定义类可以像任何其他类一样进行配置，此外还可以让您完全控制 Ext.Class#cfg-extend config。您可以使用 Config 面板的搜索字段和 Add 按钮添加自己的 config，并按上述方式添加方法。

要将自定义类包含在您的应用程序中，您可以将其添加到 Application 或使用它的特定控制器、视图、模型或存储类的 requires config 中。

请注意，通过这种方式创建的任意自定义类有一些限制。它不能在 Canvas 中呈现或用作链接实例的父级，因为 Architect 不了解其基本实现。这将在未来版本中得到改进。如果您明确将自定义类的 extend config 设置为已知类，例如 Ext.button.Button，Architect 为您提供了将其转换为成熟的按钮子类的选项，并允许将其用作画布，就像您从工具箱中拖出按钮一样。

框架类的覆盖

您可以通过右键单击工具箱中的类，然后单击“Create Override for the Class”来创建对框架类的覆盖

覆盖显示在 Project Inspector 面板的 Resources 节点下，名称为 Panel.js。选择该组件并打开 Code Panel 以对其进行修改。

您通过这种方式创建的覆盖随后将应用于整个项目中该框架类的所有实例。这可用于为组件实现某种专门行为或应用修复框架中严重错误的热修复。

请注意，您还可以只为您的类实例创建覆盖。

将组件保存到工具箱

Save to Toolbox 允许您将项目的顶级组件直接保存到组件工具箱中以供以后使用。此功能使您能够在多个项目中保存和重复使用组件。要保存您已经构建的组件（包括其所有 config 和任何子组件），请选择您要保存的顶级组件，然后转到 Actions-->Save to Toolbox。Architect 会提示您重命名组件并选择组件将显示其中的工具箱类别，如下所示

输入名称并选择适当的类别后，单击 OK，Architect 会将组件保存到工具箱。然后，该组件可供重复使用（在同一项目或其他项目中）；它会以您指定的名称显示在指定的类别中，由绿色组件图标表示。您可以在您选择的类别下找到它，或者在工具箱顶部的 Filter 字段中输入您给组件的名称。

要更新已保存的组件，请在您的项目中进行修改，然后使用相同的名称再次将其保存到工具箱。Architect 允许您覆盖原始组件并将其保存到同一类别。

将组件导出到文件

将组件导出到文件非常简单。只需在检查器中右键单击目标组件。您将看到“Export to File”选项，如下所示。

单击“Export to File”，您将收到一个提示，让您将文件保存到您的计算机。

从文件导入组件

使用“导出到文件”功能导出的组件随后可以导入到其他开发人员的 Architect 实例中，以供在其他项目中进一步开发或重复使用。请注意，只能将 Sencha Architect Ext JS 环境中创建的组件导入到 Ext JS 项目中。

如果其他开发人员对导出的组件进行了添加，则可以将其重新导入 Architect 并重新添加到项目中。这是与团队其他成员在单个 Architect 项目上协作的绝佳方式。要导入已导出的组件，请确保已将导出的组件放置在可访问的位置，无论是在桌面上还是在服务器上。在 Architect 中，打开“编辑”菜单并选择“导入组件”。导航到组件的位置，选择它，然后单击“打开”。Architect 会提示您重命名组件并选择组件将显示在其中的工具箱类别，与将组件保存到工具箱时使用的对话框相同。请参阅“保存到工具箱”下方的上图。

输入名称并选择适当的类别后，单击“确定”，Architect 会将组件保存到工具箱。该组件现在可在工具箱中使用，可将其添加到任何 Architect 项目中，就像您添加任何其他组件一样。

链接实例

链接实例使您能够在应用程序中创建和重复使用组件。通过使用链接实例，可以简化在 Architect 中构建具有许多视图的大型项目。Architect 链接实例功能的目的是重复使用：您构建一个自定义组件或 xtype，然后创建它的链接实例，以便在应用程序中需要时在任何地方重复使用新 xtype。

类旨在成为可多次实例化的可重复使用单元，因此 Architect 支持链接实例的概念以允许这样做。任何顶级视图类都可以链接到其他视图中的一个或多个位置；这些生成的链接实例将通过其 xtype 引用其类，您可以通过设置其 userAlias 配置来控制它。还可以通过选择任何子视图组件并从其上下文菜单中选择“提升到类”来创建链接实例。

创建同一组件的多个链接实例使您能够通过编辑原始组件来一次性更改所有组件，并且每个链接实例都会继承所有更改。您仍然可以分别编辑每个链接实例。对链接实例所做的更改将覆盖您赋予原始组件的属性。当您使用另一个 Architect 功能“提升到类”时，这尤其有用，您可以通过右键单击检查器中的组件来访问该功能。

链接实例：一个示例

要了解有关如何使用链接实例的更多信息，请遵循此示例

• 在新的 Ext JS 项目中，将表单面板（工具箱的“表单”类别中的“容器”组下）拖动到画布或检查器中作为顶级组件。
• 添加一个字段集（位于“容器”组中的“表单”类别中）
• 向表单添加两个文本字段。
• 将表单的 userClassName 设置为 SpecialForm，并将它的 userAlias 设置为 specialform。以下是您应该在检查器中看到的内容

• 将一个窗口（来自工具箱的“容器”类别）作为第二个顶级组件添加到项目中。
• 在检查器中，将 SpecialForm 拖动到您刚刚添加的窗口中。
• Architect 会提示您复制、移动或链接。选择“链接”。Architect 会在 MyWindow 中创建一个 SpecialForm 的链接实例（称为 MyForm...），还会创建一个名为 specialform 的 xtype，可以在应用程序中的其他地方重复使用。以下是检查器现在应该如何显示的内容

让我们在视口中重复使用 specialform。

• 将视口添加为另一个顶级组件。在检查器中，将顶级 SpecialForm 拖动到视口中。
• 在提示复制、移动或链接时，选择“链接”。Architect 会在视口下创建第二个 SpecialForm 的链接实例（MyForm...）。

您项目的检查器现在应该看起来像这样

• 选择 SpecialForm 的每个新实例（窗口和视口下的 MyForm...），并在画布中查看它。每个实例都将具有添加到 FieldSet 中的两个字段，该 FieldSet 是原始 SpecialForm 的一部分。
• 现在，选择原始的顶级SpecialForm，并向其 FieldSet 添加一个新的文本字段。在检查器中，再次选择窗口和视口中的链接实例。您可以在画布中看到每个表单也包含新字段。

Architect 还允许您对每个链接实例进行更改。假设您想更改视口中表单的名称。为此，选择视口下的MyForm...，并在配置面板中编辑其标题配置。更改将仅对SpecialForm的该实例进行。

使用覆盖来对链接实例进行更多操作

有些事情无法使用 Architect 拖放可视化界面完成。例如，假设您只想向视口中表单的实例（而不是窗口中的版本）添加一个 ComboBox。

为此，创建一个有条件包含 ComboBox 的覆盖

• 选择视口，单击画布左上角的代码按钮，然后单击创建覆盖。
• 使用 Architect 代码编辑器，创建在创建自定义配置时覆盖 initComponent 的代码，您可以根据需要对其命名，例如在本例中为showCombo。然后，您可以对表单的视口实例设置自定义配置。您将无法在画布设计视图中看到 ComboBox，因为 Architect 不知道查找覆盖代码。但是，它将在运行时完美工作，并且 ComboBox 将按预期在浏览器中显示。

Architect Kiva 示例应用程序说明了链接实例和提升到类进程。您必须指定一个覆盖才能将自定义外部库添加到 Architect，并在 Architect 的组件中使用这些库。在 Kiva 示例应用程序中，提供了一个特殊的 JSONP 代理库，它通过 YQL 传递以执行 Architect 可以本机处理的查询。

这是通过添加一个库 KivaProxy.js 作为资源来实现的。然后，不是添加一个 JSONP 存储，而是添加一个普通存储，并手动覆盖代码以使用 KivaProxy.js 中的代码（在该文件中给出了别名“proxy.kiva”）。Architect 2.1 代码中的摘录说明了这一点

Ext.define('Kiva.store.override.Loans', { override: 'Kiva.store.Loans',

    requires: [
        'Kiva.model.Loan'
    ],

    config: {
        autoLoad: true,
        model: 'Kiva.model.Loan',
        remoteFilter: true,
        storeId: 'Loans',
        proxy: {
                type: 'kiva',
                reader: {
                    type: 'json',
                    successProperty: 'success',
                    rootProperty: function(data) {
                            if (data.error || data.query.count === 0) {
                                return [];
                            } else {
                                return data.query.results.loans;
                            }
                        }
                }
            }
       }

});

此方法有一些严重的缺点

• 它需要一些 ExtJS 覆盖的工作知识，并且是一种实现简单目标的繁琐手段。
• 由于手动覆盖，您还必须为“读取器”编写代码——该代码告诉存储在数据中的何处查找相关记录。
• 存储下的任何其他属性也必须在代码中进行调整，而不是在 Architect GUI 中进行调整，以便用户在需要进行更改时进行调整。

出于这些原因，createAlias 功能已添加到 Architect 2.2 中。这些覆盖仍然适用于更高版本，但以下描述的功能对于正在开发的项目来说更容易维护。

createAlias 和 createClass

Sencha Architect 2.2 及更高版本包括称为createAlias和createClass的功能，使开发人员能够引入外部库，在不使用代码覆盖的情况下将自定义代码插入组件中。许多应用程序与 Sencha 框架一起使用其他库，而createAlias和*createClass配置允许通过为外部组件设置 xtype 或类名来更简单地集成这些外部 JavaScript 库。

Architect Kiva 示例应用程序说明了如何通过使用 createAlias 和无覆盖来实现相同的效果。相反，通过以下方式实现相同的效果

• 添加一个 JSONP 存储
• 将 createAlias 配置设置为“kiva”。
• 将读取器的“root”属性设置为“query.results.loans”

这不仅实现起来更快，而且还提供了使用简单 GUI 的灵活性和便利性，以继续对存储、代理和/或读取器进行任何进一步的自定义。createAlias为您提供了一个名称来引用子组件，然后您可以轻松地使用此名称引用该子组件，而不必像在 Architect 2.1 中那样覆盖存储。

保存和导出子组件

上面显示的过程仅适用于顶级组件。需要不同的过程来保存和导出子组件。例如，如果您有一个 LoginScreen 容器，并且您想向其中添加一个先前创建的 LoginForm 组件，您可以将 LoginForm 组件拖放到 LoginScreen 容器上并建立一个链接实例。链接实例类似于面向对象编程术语中所说的对象实例。因此，直接对 LoginForm 组件进行的任何更改都将反映在链接实例中。您可以创建任意数量的链接实例，可以通过拖放顶级组件或复制现有的链接实例来创建。通过使用此技术，您可以分别构建项目的每个逻辑部分，然后通过将链接实例建立到聚合容器（例如视口）中来查看所有这些部分。

链接实例和提升到类（Architect 2.1）

Architect 2.1 提供了链接实例和提升到类功能，使您可以创建顶级组件的实例作为另一个顶级组件的子项。请注意，Architect 2.2 引入了 createAlias 功能（如下所述），这是一种实现相同目标的更简单、更好的方法。

链接实例在构建复杂项目时非常有用。如果您创建同一组件的多个链接实例，则可以通过编辑原始组件一次性更改所有实例，并且每个链接实例都会继承所有更改。您仍然可以分别编辑每个链接实例；对链接实例所做的更改将覆盖您赋予原始组件的属性。当您使用另一个 Architect 功能“提升到类”时，这尤其有用。

组件中的任何子项都可以使用“提升到类”功能提升到顶级组件，并在 Architect 项目目录中成为其自己的类。例如，网格列只能在最初创建时添加到网格面板或树面板，因为它们本身没有任何用途。

为此，首先将网格面板拖动到检查器中的视图。默认情况下，新的网格面板会收到几列。在检查器中右键单击“布尔值”（其中一列的标题）并选择“提升到类”。

该列成为其自己的顶级组件，并在检查器中被链接实例替换。当 Architect 导出项目时，它会为组件/类生成一个单独的 .js 文件。这适用于 Architect 中的大多数视图组件。

如果您与团队合作，使用此功能可以更轻松地共享和管理项目。除了生成更易于管理的代码外，将 Architect 项目组织为顶级组件的集合还可以更轻松地继续开发项目。通过在主应用程序视图中使用链接实例，仍然可以轻松地在上下文中查看所有顶级组件。“提升到类”与链接实例协同工作，让您可以将任何嵌套组件转换为顶级组件。当您执行此操作时，Architect 会在您保存和归档项目时为该组件创建单独的 .js 文件。当您使用“提升到类”时，原始组件将被一个链接实例替换为其新的顶级版本。这使得将大型组件分解为更小、可重用且更易于管理的子集变得很容易。这也意味着您可以在我们的新组件类上实现行为、覆盖函数或实现函数类型配置选项。