Sencha-架构应用开发指南-全-

Sencha 架构应用开发指南（全）

原文：zh.annas-archive.org/md5/d13f47b7cd06363396f4caa92402cb94

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

欢迎来到 Sencha Architect 应用程序开发。本书的目标是帮助您通过一系列完整的示例和技巧窍门，学习如何使用 Sencha Architect 来提高您开发 Sencha（Ext JS 和 Sencha Touch）应用程序的生产力。

Sencha Architect 是一个 HTML 5 可视化应用程序构建器，允许您通过拖放组件和实时预览应用程序来创建 Sencha Touch（移动）和 Ext JS（桌面）应用程序。在 Sencha Architect 中构建的所有代码都旨在符合最佳实践，这使得构建大型应用程序或简单地学习变得容易。并且所有生成的代码都可以由您手动编写，这展示了这个工具的强大功能。

本书涵盖的内容

第一章, 介绍 Sencha Architect，介绍了 Sencha Architect 及其界面功能，如项目基础、工具箱、配置面板、项目检查器和设计画布。

第二章, 创建一个 Ext JS 应用程序，演示了如何使用 MVC 架构和 Sencha Architect 创建一个完整的 Ext JS 应用程序，以及如何首次执行项目。

第三章, 创建一个 Sencha Touch 应用程序，介绍了如何使用 MVC 架构和 Sencha Architect 创建一个完整的 Sencha Touch 应用程序。本章还演示了如何将 Sencha Touch 应用程序与 Phonegap 集成。

第四章, 技巧和窍门，探讨了可以帮助开发者日常工作中使用 Sencha Architect 的一些有价值的技巧和窍门。涵盖的一些主题包括使用第三方插件、多语言应用程序、创建可重用自定义组件等。

第五章, 处理资源，解释了如何使用项目检查器中的资源工具箱和资源包。

第六章, 模拟、构建、打包和部署项目/应用程序，解释了如何通过预览（在浏览器中）、打包、构建和部署来准备应用程序以供生产使用。

您需要为本书准备的内容

以下是在执行本书示例之前您需要安装的软件列表。

使用以下浏览器：

• 推荐使用 Google Chrome 执行 Sencha Touch 应用程序 (www.google.com/chrome)

使用以下支持 PHP 的 web 服务器（或您偏好的任何其他 web 服务器）：

• Xampp (www.apachefriends.org/en/xampp.html)

使用以下数据库：

• MySQL (dev.mysql.com/downloads/mysql/))

• MySQL Workbench 或其他数据库管理员 (dev.mysql.com/downloads/tools/workbench/)

使用以下 Sencha 工具和所需的互补软件：

• Sencha Cmd (www.sencha.com/products/sencha-cmd/download)

• Ruby (www.ruby-lang.org/en/downloads/)

• Sass (sass-lang.com/)

• Compass (compass-style.org/)

• Java JDK (www.oracle.com/technetwork/java/javase/downloads/index.html)

• Java 环境变量 (docs.oracle.com/javase/tutorial/essential/environment/paths.html)

• PhoneGap (phonegap.com/)

• Ext JS (www.sencha.com/products/extjs/)——我们将使用 Ext JS 4.2

• Sencha Touch (www.sencha.com/products/touch/)——我们将使用 Sencha Touch 2.2

• Sencha Architect 2.2 或更高版本 (www.sencha.com/products/architect/)

使用以下 iOS 工具（可选——仅限 Mac OS）：

• 带有命令行的 XCode (developer.apple.com/xcode/)

使用以下 Android 工具：

• Eclipse 是可选的，但强烈推荐 (www.eclipse.org/downloads/)

• Android SDK (developer.android.com/sdk/index.html)

这本书面向的对象

这本书是为已经熟悉 Ext JS 和 Sencha Touch（至少具备基本知识）的开发者编写的。对 HTML 编码的了解、CSS 的基本背景、JavaScript 的深厚背景以及 JSON 的基本理解也非常受欢迎。这本书也适合想要了解更多关于 Sencha Architect 及其如何提高生产力的开发者。

习惯用法

在这本书中，您将找到许多不同风格的文本，以区分不同类型的信息。以下是一些这些风格的示例及其含义的解释。

文本中的代码单词如下所示："Sencha Architect 适用于 Windows（.exe）、Linux（.run）和 Mac OS（.dmg）用户。"

新术语和重要词汇将以粗体显示。您在屏幕上看到的单词，例如在菜单或对话框中，将以如下方式显示："接下来，将显示欢迎来到 Sencha Architect的屏幕，如下面的截图所示。"

注意

警告或重要注意事项将以这样的框显示。

小贴士

小贴士和技巧如下所示。

读者反馈

我们始终欢迎读者的反馈。告诉我们您对这本书的看法——您喜欢什么或可能不喜欢什么。读者反馈对我们开发您真正能从中获得最大价值的标题非常重要。

要向我们发送一般反馈，只需发送一封电子邮件到<feedback@packtpub.com>，并在邮件主题中提及书名。

如果您在某个主题上具有专业知识，并且您对撰写或为书籍做出贡献感兴趣，请参阅我们的作者指南www.packtpub.com/authors。

客户支持

现在您是 Packt 图书的骄傲拥有者，我们有多种方式帮助您从您的购买中获得最大收益。

勘误

尽管我们已经尽最大努力确保内容的准确性，错误仍然可能发生。如果您在我们的某本书中发现错误——可能是文本或代码中的错误——如果您能向我们报告这一点，我们将不胜感激。通过这样做，您可以避免其他读者感到沮丧，并帮助我们改进本书的后续版本。如果您发现任何勘误，请通过访问www.packtpub.com/submit-errata，选择您的书籍，点击勘误提交表单链接，并输入您的勘误详情来报告它们。一旦您的勘误得到验证，您的提交将被接受，勘误将被上传到我们的网站，或添加到该标题的勘误部分下的现有勘误列表中。您可以通过从www.packtpub.com/support选择您的标题来查看任何现有勘误。

侵权

互联网上版权材料的侵权是一个跨所有媒体的持续问题。在 Packt，我们非常重视我们版权和许可证的保护。如果您在互联网上发现任何我们作品的非法副本，无论形式如何，请立即提供位置地址或网站名称，以便我们可以寻求补救措施。

请通过<copyright@packtpub.com>与我们联系，并提供疑似侵权材料的链接。

我们感谢您在保护我们作者和我们为您提供有价值内容的能力方面的帮助。

询问

如果您在本书的任何方面遇到问题，可以通过<questions@packtpub.com>联系我们，我们将尽力解决。

第一章. 介绍 Sencha Architect

Sencha Architect 是一款软件工具，使我们能够使用 Sencha Touch 和 Ext JS 框架。它是一个 所见即所得（WYSIWYG） IDE，提供使用可视化编辑器和内置代码编辑器实现应用程序的能力。它还使用拖放可视化界面进行快速应用程序开发，针对桌面（Ext JS）和移动设备（Sencha Touch）。在本章中，我们将介绍 Sencha Architect 的基础知识。我们将涵盖以下内容：

• 介绍 Sencha Architect 及其界面功能

• 项目基础知识

• 检查器

• 配置面板

• 工具箱

• 设计画布

开始使用

Sencha Architect 是 Sencha Touch 和 Ext JS 框架库的优秀学习工具。此外，Sencha Architect 也是应用程序快速原型设计和快速无代码启动以及完整应用程序开发的优秀工具。Sencha Architect 在两个层面上工作：作为原型工具以及代码生成工具。特别是对于复杂的 UI，它节省了通常花费在调整布局和确保嵌套元素良好协作上的数小时开发时间。最好的是（并且与大多数原型工具不同），它生成干净、面向对象的代码，看起来就像您自己编写的代码；并且它完全使用 Ext JS 编写。

Sencha Architect 于 2010 年发布。在 2010 年，它被称为 Ext Designer，并且仅支持 Ext JS 应用程序（仅支持 Ext JS 3）。然后，当 Sencha 发布 Ext JS 4.2 时，Ext Designer 获得了升级，并被称为 Ext Designer 1.2，支持开发 Ext JS 3 和 Ext JS 4 应用程序。2012 年 1 月，Sencha 宣布了 Sencha Designer 2 测试版，这是从 Ext Designer 的另一个升级，但现在，该工具也支持 Sencha Touch 2 应用程序开发。2012 年 4 月，Sencha 决定将工具重命名为 Sencha Architect 2，这是一个用于使用 Ext JS 4 开发桌面应用程序（它失去了对 Ext JS 3 的支持）和使用 Sencha Touch 2 开发移动应用程序的完整工具。

因此，这就是为什么没有 Sencha Architect 1 的原因，因为它在成为 Sencha Architect 之前被称为 Ext Designer！当前最新版本是 2.2.2（本书编写时）。

在我们开始动手之前，有一些事情您需要了解：

• 熟悉 HTML 编码

• 基本的 CSS（层叠样式表）背景

• 强大的 JavaScript 背景，以及对 JSON（JavaScript 对象表示法）的基本理解

• 对 Ext JS 和 Sencha Touch 的基本了解

我们将探索 Sencha Architect 的许多功能，并创建一些示例。但是，您也可以通过以下链接查看示例：

• Ext JS 示例在 github.com/loiane/sencha-extjs4-examples-architect

• Sencha Touch 示例在 github.com/loiane/sencha-touch2-examples-architect

• Sencha 示例在 github.com/SenchaArchitect

展示 Sencha Architect

在我们开始之前，您需要在您的计算机上安装 Sencha Architect。由于 Sencha Architect 是一款付费工具，您可以在 www.sencha.com/products/architect/download/ 下载 30 天试用版，或者您可以在 www.sencha.com/store/architect/ 购买许可证。Sencha Architect 支持 Windows（.exe）、Linux（.run）和 Mac OS（.dmg）用户。安装过程非常简单。您只需运行可执行文件，并按照向导步骤操作（也需要管理员权限）。

安装完成后，点击 Sencha Architect 应用程序以运行它：

首次运行 Sencha Architect

当您首次执行 Sencha Architect 时，您可以选择输入用户名和密码（与您在 Sencha 论坛上用于 30 天试用版相同的用户名和密码）或使用在您在 Sencha 网站上完成购买后发送到您的电子邮件的许可证密钥激活软件。接下来，将显示欢迎使用 Sencha Architect屏幕，如图所示：

在屏幕的左侧，我们可以找到指向其文档、变更日志和Sencha Architect 论坛的链接。在打开最近的项目下，我们可以找到我们最近工作的四个项目的列表，以及一个打开现有项目的链接。在现有项目列表下方，我们可以选择一个可用的框架来创建一个新的空白项目。

一旦我们打开 Sencha Architect，屏幕将显示如下截图：

如前一个截图所示，Sencha Architect 的界面由七个主要项目组成：

• 应用程序工具栏

• 软件内集成的在线文档

• 项目检查器

• 配置面板

• 由设计编辑器和代码编辑器组成的画布

• 工具箱

• 日志

让我们深入了解 Sencha Architect 界面中的每个主要项目。

工具栏

工具栏包含对 Sencha Architect 最常用功能的快捷方式，例如创建新项目、打开现有项目、保存项目、构建、发布（部署）、预览（自动打开浏览器以预览应用程序）和编辑项目设置。

您也可以隐藏这个工具栏。点击设置，转到应用程序选项卡，并取消选中显示工具栏复选框，如图所示：

在应用程序设置中，还可以启用或禁用选项卡（在可视化/代码编辑器中打开的类）；将项目 检查器更改为左侧或右侧位置（我们将在项目检查器主题中讨论这一点），以及更改 Sencha Architect 的代码编辑器主题、使用代码编辑器字体大小调整代码字体大小，并在代码编辑器中启用JSHint验证。

要再次显示工具栏，请转到应用程序菜单，编辑 | 项目设置，并再次勾选显示工具栏选项。

工具箱

在工具箱中，您可以找到在实现应用程序时可以使用的所有原生组件，包括在模型、视图、控制器和存储中使用的组件。它们根据其功能区域（视图、表单、数据、图表等）组织。您也可以通过选择所有内容来查看所有可用的组件。如果您需要查找特定的组件，您还可以使用搜索字段来过滤组件。

工具箱组件将根据您是在进行 Ext JS 还是 Sencha Touch 项目的工作而设置不同的变化，如以下截图所示：

默认情况下，工具箱位于 Sencha Architect 的左侧，右侧是项目检查器和配置面板。可以将工具箱切换到右侧，这样左侧将会有项目检查器（如果我们处理的是大型项目，这可能很有趣），而工具箱和配置面板将位于右侧。要这样做，请返回到项目设置并选择您喜欢的侧边。

配置面板

在整本书中，您会发现使用 Sencha Architect，您需要自己编写的代码量非常少。基本上，我们只需编写函数或全新的类。其余的都将通过使用 Sencha Architect 的功能来完成。因此，配置面板非常重要。配置面板的主要用途是我们可以查看我们创建的类的属性值，以便我们可以设置一个值或更改现有的值。

以下截图显示了配置面板及其一些功能：

在配置面板中，有一些东西可以帮助我们提高开发任务。例如，根据你在项目检查器中选择的类，配置面板显示所选类或组件的配置属性。这非常有帮助，因为我们可以访问该类的所有属性，我们不需要总是参考文档来查看我们正在寻找的属性是否在那里。此外，Sencha Architect 只显示 Sencha 推荐的最佳实践属性；例如，对于 Form 类（配置 buttons 在 Sencha Architect 中不会显示），使用 dockedItems 代替 buttons。

如果你没有心情滚动查看特定类的所有配置，你可以轻松地使用过滤器来搜索特定的配置（3）。通过点击锁形图标（4），你可以锁定过滤器，当你从项目检查器中选择另一个类时，过滤器将自动应用。如果你想要移除过滤器，只需关闭面板即可。

看到那个问号图标（2）了吗？当你将鼠标悬停在问号图标上时，你可以阅读类的简要描述，如果我们想了解更多关于它的信息，我们可以点击描述框中的链接并进入文档。同样，当我们将鼠标悬停在类的配置上时，问号图标也会显示配置的简要描述，我们也可以访问在线文档来了解更多关于它的信息。

我们还可以在配置标签的旁边看到两个图标（1）。第一个（在截图上已选中），将显示所选类的常用配置。第二个将显示高级配置，例如 alternateClassName（用于与旧版本保持兼容）。通常，我们只会使用常用配置，但如果你需要使用一些高级配置，Sencha Architect 也提供了这个选项。

现在，假设你想要使用配置面板上未列出的配置。我们能添加它吗？答案是肯定的。我们可以添加配置面板上不存在的配置。要这样做，请转到过滤器，输入配置的名称，然后点击添加按钮（5）。这个新的配置将列在（自定义属性）下。通过点击…，我们可以选择新配置的类型（6—数组，布尔值，数字，对象或字符串），然后根据所选类型设置其值。

Sencha Architect 的另一个不错特性：因为这个工具根据 Sencha 最佳实践提供和生成代码，当您尝试设置特定属性的值时，Sencha Architect 会允许您根据属性类型设置值。例如，如果您需要为网格或列表设置store属性，Sencha Architect 会列出当前已创建的当前存储（7），因此您可以从列表中选择一个。而且，如果您更改了store的名称，它将在使用该store的类中自动更改。这有助于我们在代码上犯更少的错误。根据配置类型，可以使用的一些编辑器有布尔值、数组、类、字符串、模板或选项，如下面的截图所示：

如果配置已被类使用，它将以蓝色显示；（1）在之前的截图中。要从此类中移除此属性，我们只需点击属性面板。

一些类可以被其他类用作配置。例如，一个Ext.panel.Grid类可以有一个或多个Ext.grid.column.Column类（或其子类）。我们可以通过点击以下截图显示的箭头图标来从网格的特定列导航到其配置：

画布

画布是您可以直观创建应用程序的地方，您还可以编辑其代码。

小贴士

您还可以将工具箱组件拖放到设计画布以及项目检查器中，这在设计画布上有很多组件时尤其有用。

画布有两个标签页：设计标签页，这是可视化编辑器，或者代码编辑器标签页。让我们更深入地了解一下它们。

可视化编辑器

可视化编辑器提供了应用程序的视觉表示。在这里，您可以查看应用程序或特定组件的外观，而无需在浏览器上执行应用程序。还有一个刷新按钮，如果您进行了更改并希望刷新可视化编辑器以查看其外观，您可以使用它。您还可以在设计和代码编辑器标签页之间导航。

对于 Ext JS 和 Sencha Touch 项目，可视化编辑器略有不同。以下截图来自一个 Ext JS 项目：

在底部，您可以调整可视化编辑器的大小（2）。这可以用来查看应用程序在不同分辨率屏幕上的外观。

此外，还有展开配置（1），它可以用来设置布局配置和其他影响组件外观的属性。

在下一张截图中，我们可以看到 Sencha Touch 项目的可视化编辑器：

我们还可以编辑画布大小（1），由于 Sencha Touch 是为移动应用程序设计的，我们可以选择不同的设备（iPhone (320 x 480)，iPad (786 x 1023)，Nexus S (480 x 800)，和 PlayBook/Kindle Fire (600 x…)）来查看应用程序在不同设备上的外观。我们还可以设置自定义大小。如果我们想查看应用程序在不同位置上的外观，我们可以设置为水平（默认选项）或垂直（2）。我们还可以设置画布的缩放（3），并且我们还可以要求 Sencha Architect 根据我们电脑屏幕上的可用空间调整画布（4）。

代码编辑器

切换到代码标签，我们可以看到特定组件生成的代码（以下屏幕截图中的1）。如果我们尝试直接在代码编辑器中更改特定的属性，我们会注意到除非它是函数，否则这是不可能的。这是因为大部分的配置都将使用配置面板来完成。这可以是一件好事，也可能是一件坏事。这是好事，因为它可以保持代码免受不必要的更改，并按照 Sencha 最佳实践生成代码。然而，它也可能是一个坏处，因为它限制了我们的代码编辑能力；我们需要习惯使用配置面板。总的来说，Sencha Architect 有这种行为是好事。对于习惯自己编写所有代码的开发者来说，这只是习惯这种新编码方式的问题：

在前面的屏幕截图中，在顶部，你可以轻松地浏览你已打开或创建的不同类（2），你也可以从当前打开的标签列表中打开特定的标签（6）。

注意

如果你不想保留你正在工作的类别的标签页，你可以通过回到设置 | 应用程序并选择禁用对于持久保存当前项目保存时打开的标签页选项来轻松地禁用此选项。

我们还可以浏览特定组件的代码（3）。我们可以浏览的可用项包括：

• 生成的类，它是生成代码的只读版本

• 生成的 JSON，它也是类生成的 JSON 代码的只读版本（如果我们使用 Ext.create 来实例化它，这是我们传递给类的配置）

• 如果我们覆盖当前类，将使用的覆盖类（4——我们将在本书后面的部分了解更多关于覆盖的内容）

• 可编辑的代码项，如事件绑定、控制器操作、函数和模板

Sencha Architect 还允许我们使用导出到磁盘图标（5）将代码编辑器上显示的当前代码保存到单独的文件中；也可以将代码复制到剪贴板。

如果我们将鼠标悬停在代码的某些部分（7—可编辑的部分，如函数和模板）上，我们会看到会出现一个编辑图标。如果我们点击它，代码将可供编辑，如下面的截图所示：

如果启用了 JSHint 验证（设置 | 应用程序以启用或禁用它），我们将在代码中看到任何警告或错误（如前一个截图中的第20行上的缺少分号）。

Sencha Architect 还提供了查找和替换功能。通过点击Ctrl + F（或在 Mac OS 上点击cmd + F），我们可以在代码中搜索特定的字符串。通过点击Ctrl + H（或在 Mac OS 上点击cmd + Alt + F），我们可以启用替换功能，如前一个截图所示。

尽管 Sencha Architect 为我们生成了大部分代码，但在可编辑的部分，目前还没有自动完成功能（Sencha Architect 2.2），因此我们必须在没有智能感应（或代码补全）的帮助下编写代码。

项目检查员

在项目检查员中，我们可以看到我们项目的结构，包括为特定项目创建的所有控制器、存储、视图、模型和资源。如果我们展开一个类，我们将能够看到其内部组件和函数。对于大型项目，使用快速打开…功能可以轻松找到特定的类。通过点击加号图标，我们可以快速创建一个新的控制器、存储、模型、资源或全新的类：

Sencha Architect 在创建类后也提供了一些选项。例如，假设我们创建了一个视口，但那并不是我们真正需要的；我们需要创建一个面板而不是视口。通过右键单击我们创建的类，我们可以将其转换成其他东西；这样，就无需删除当前类并重新编写所有现有代码。让我们再举一个例子：如果我们需要创建一个网格面板，但我们设置了存储，通过右键单击它，我们可以通过选择自动列选项自动生成基于模型或存储的字段的全部列。在存储中，如果我们为代理设置了用于加载数据的 URL，我们可以选择加载数据选项并查看服务器发送回的数据。其他选项还包括：导出到文件…，我们可以将当前类导出到外部文件，其他开发者可以将其导入到 Sencha Architect；标记为初始视图或取消标记为初始视图，我们可以设置哪个组件将是应用程序的初始视图；以及复制、删除或保存到工具箱（将组件保存到工具箱以供重用）：

我们将在本书中学习更多关于这些选项的内容。

在线文档

通过点击右上角的在线文档图标，Sencha Architect 将在您的默认浏览器中打开其在线文档。在线文档中，我们可以通过其指南了解更多关于 Sencha Architect 的信息：docs.sencha.com/architect/2/。

日志

当我们点击日志时，Sencha Architect 将显示一个新窗口，显示最新的消息。这也会清除日志计数：

准备环境

在我们进入下一章之前，让我们准备好环境，以便我们可以使用 Sencha Architect 创建我们的第一个项目。

我们需要一个 Web 服务器来执行我们的项目。在这本书中，我们将使用 XAMPP (www.apachefriends.org/en/xampp.html) 作为默认的 Web 服务器。您也可以使用您已经在计算机上安装的任何 Web 服务器（IIS、Apache HTTP 等）。

在以下链接中，如果您还没有安装 XAMPP，您将找到一个简要教程：

• Mac OS: www.apachefriends.org/en/xampp-macosx.html

• Windows: www.apachefriends.org/en/xampp-windows.html

• Linux: www.apachefriends.org/en/xampp-linux.html

在 XAMPP 的 htdocs 目录（或您的 Web 服务器的 public 目录）内，创建一个名为 sencha-architect 的新文件夹。这是我们将在整本书中保存所有创建的 Sencha Architect 项目的位置。

摘要

在本章中，我们了解了 Sencha Architect 的基础知识以及一些界面功能，例如工具栏、工具箱、配置面板、可视化编辑器、代码编辑器、在线文档和项目检查器。由于这是我们第一次接触 Sencha Architect，本章是一个介绍。我们将在整本书中了解更多关于这些内容。

我们还学习了如何准备我们的环境，因此我们可以在下一章开始创建我们的第一个 Ext JS 项目。

第二章：创建 Ext JS 应用

在本章中，我们将通过实现一个使用 Ext JS 的示例应用程序来迈出 Sencha Architect 的第一步，始终突出 Sencha Architect 的功能。我们将涵盖以下内容：

• 创建 Ext JS 项目

• 创建模型、存储、视图和控制器

• 首次执行项目

实现 Ext JS 应用

在我们开始实现我们的 Ext JS 应用程序之前，让我们看看本章结束时我们将有什么：

它是一个简单的网格，列出书籍，我们将从数据库中检索这些书籍。

创建项目

首先，要创建一个新的 Ext JS 项目，请参考以下截图：

项目创建后，我们将看到带有工具栏、画布、项目检查器、配置面板和工具箱的登录屏幕。我们将立即保存项目。为此，请点击工具箱中的 保存 或按 Ctrl + S (cmd + S 在 Mac OS 上)。将显示 保存项目 屏幕：

我们将项目保存为 extBooks，位于 sencha-architect 目录下。

现在项目已保存，我们可以开始实现了。我们将遵循以下开发工作流程：首先实现模型，然后是存储、视图和控制器，然后重复此过程，直到项目完成。

简单谈谈 MVC

模型-视图-控制器 (MVC) 是一种软件架构模式，它将信息的表示与用户的交互分离。模型表示应用程序数据，视图表示数据的表示输出（表单、网格、图表），控制器调解输入，将其转换为模型或视图的命令。

Ext JS 和 Sencha Touch 使用 模型-视图-控制器-存储 (MVCS) 模式。模型是我们想要在应用程序中操作的数据的表示（数据库中表的表示）。视图包含我们创建的所有组件和屏幕，用于管理模型的信息。由于 Ext JS 是事件驱动的，所有视图在用户与之交互时都会触发事件，控制器将捕获这些事件并执行某些操作，将命令重定向到模型（或存储）或视图。Ext JS 中的存储与在服务器端使用的 数据访问对象 (DAO) 模式非常相似。

为了快速举例，假设我们有一个WidgetA，它是一个显示表 A 中所有记录的网格面板。ModelA代表这个表。StoreA表负责检索信息（从服务器获取的ModelA集合）。当用户点击WidgetA中的记录时，将打开一个窗口（称为WidgetB），显示表 B 的信息（由ModelB表示）。当然，StoreB将负责从服务器检索ModelB集合。在这种情况下，我们将有ControllerA来捕获WidgetA的点击事件，并执行所有必要的逻辑以显示WidgetB并加载所有ModelB信息。如果我们尝试将其放入快速参考图中，它将看起来像以下截图：

注意

有关 MVC 和 Sencha 应用程序的更多信息，请访问docs.sencha.com/extjs/4.2.1/#!/guide/application_architecture。

配置应用程序

第一步是设置我们将在本章中开发的整个应用程序。在我们开始之前，在项目检查器中，选择应用程序选项（以下截图中的步骤 1），然后转到配置面板；找到名称属性并将其值设置为Packt（步骤 2）。这是我们的应用程序命名空间，意味着所有类都将命名为Packt. + package + className。许多编程语言使用命名空间来避免与全局命名空间中的其他对象或变量发生冲突。如果我们打开代码编辑器，我们将看到的代码与步骤 3相同：

所有这些配置都将应用于app.js文件，因为应用程序选项代表app.js文件。

创建模型

按照我们的开发工作流程，我们将从模型开始。在项目检查器的顶部，点击+图标，并选择模型（步骤 1）：

一旦创建了模型，选择它，转到配置面板，并将类名（userClassName）设置为Book（步骤 2）。然后，仍然在配置面板中，找到字段选项，点击其+图标，并添加第一个字段，我们将命名为id。继续添加以下字段：id、name、author、language、paperback、releaseDate、isbn和isbn13，如图所示（步骤 4）：

如果我们回到项目检查器，书籍模型应该看起来像步骤 5。如果我们查看画布，设计模式下将不会显示任何内容，但如果我们查看代码编辑器，Packt.model.Book类将被定义。如果我们尝试编辑其代码，将无法进行，因为我们有一个简单的模型，其中没有函数或方法（由我们自己创建）。

保存项目并查看 Sencha Architect 迄今为止创建的文件，我们会看到它已经在app/model目录中创建了一个名为Book.js的文件。

创建存储

下一步是创建一个存储。我们的数据将来自服务器（Java、Ruby、PHP、.NET 等），我们将使用 Ajax 来加载它。因此，我们需要创建一个使用 Ajax 代理来读取以JavaScript 对象表示法（JSON）格式从服务器发送的信息的存储。因此，我们需要回到项目检查器，再次点击+图标，选择Store和Json Store，如下面的截图所示：

注意

有关 Ajax 代理和 Json Store 的更多信息，请访问docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.proxy.Ajax。

在创建存储后，我们会看到一个红色的感叹号图标（步骤 1）。如果我们点击它（步骤 1），我们会看到一个错误消息，说明我们需要为此存储关联一个模型或至少在存储上创建一个字段（步骤 2）。因为我们已经有一个模型，所以点击项目检查器中的存储（MyJsonStore），进入配置面板，搜索model，然后可以从列表中选择Book模型（该模型已经创建）（步骤 3）。在这种情况下，我们只创建了Book模型：

接下来，我们需要为我们的存储命名。我们将称之为Books（遵循 Sencha MVC 约定，存储名称应该是模型名称的复数形式）。Sencha Architect 还会自动为存储创建storeId字段。让我们也将它改为books（如下面的截图所示）。还要搜索pageSize属性，并将其设置为5（我们稍后将使用分页工具栏）：

下一步是选择项目检查器中Books存储下的代理（MyAjaxProxy），定位到url配置，并将其值设置为http://localhost/sencha-architect/extBooks/php/list.php。我们将在这个示例中创建php文件夹中的服务器代码。您可以从本书附带源代码中获取服务器端代码。

最后，我们需要为读者设置一些配置。为此，请选择MyJsonReader存储，定位到root属性，并将其值设置为data：

当我们从服务器加载信息时，我们期望收到一个名为data的属性，它将包含书籍对象的集合。

测试的最后一步——如果一切正常的话——是加载存储。要这样做，请选择Books存储，右键单击它，然后选择加载数据；然后，将显示一个新窗口，其中包含从服务器加载的数据。如果您想查看加载的信息，也可以点击如下截图所示的眼睛图标：

我们将代理 URL 设置为http://localhost/sencha-architect/extBooks/php/list.php（完整路径），以便我们可以进行此测试。通常，我们只需要设置相对 URL；在我们的情况下，它是php/list.php。完整的 URL 仅用于测试。

注意

您可以在github.com/loiane/sencha-architect-app-development下载的extbooks项目中找到list.php文件。在执行项目之前，请执行dbscript.sql文件，并将db.php文件中的用户名和密码更改为连接到您的数据库。

大多数开发者犯的一个错误是将服务器代码部署在服务器上，而将 Sencha Architect 项目部署在不同的位置。我们始终需要记住，我们正在使用 Ajax 代理，这意味着调用需要从与项目部署相同的 URL（服务器）进行。如果您想使用不同的域名/服务器，可以使用 JSONP 代理或在服务器端启用跨源资源共享（CORS）。

注意

要了解更多关于 CORS 的信息，请访问enable-cors.org/。

保存项目并查看 Sencha Architect 迄今为止创建的文件后，我们将看到它已在app/store目录中创建了一个名为Books.js的文件。

创建书籍网格

在下一步中，我们将创建我们的第一个视图，即书籍网格。创建视图有两种方式。您可以选择您最喜欢的一种。第一种方法需要选择项目检查器上的视图包，转到工具箱，找到网格面板组件，然后双击它。将在视图包下创建一个名为MyGridPanel的新网格面板视图：

您可以使用这种方法做任何事情。如果您想在网格中添加工具栏，请从项目检查器中选择网格，然后转到工具栏并双击您想将其作为网格（或任何其他视图、存储、模型或控制器）项目添加的组件。

第二种方法是从工具箱中选择组件并将其拖放到视图包内（或者它也可以是一个视图、存储、模型或控制器）：

一旦我们在视图包下有了MyGridPanel组件，我们需要设置一些配置。选择MyGridPanel视图，进入配置面板，取消勾选initialView属性，将userAlias设置为booksgrid（别名约定全部小写），并将userClassName设置为BooksGrid（这是类的名称），如步骤 1所示。然后，定位store属性并选择Books存储（步骤 2）：

现在，我们的类在视图中命名为BooksGrid，选择它，右键单击它，并选择自动列（步骤 3）。这将根据与BooksGrid类关联的存储的模型字段生成所有列（步骤 4）。然而：我们只能在设置了网格上的存储后生成自动列。

接下来，我们可以转到画布上的设计选项卡，更改一些内容，例如网格标题、列标题和列宽。要修改网格或列的标题，只需双击它，如下所示（或者您也可以通过使用配置面板来完成）：

这些功能可以为我们节省一些时间，因为我们不需要进入配置面板来配置它们。

我们最后一步是将分页工具栏添加到书籍网格中。在项目检查器中选择BooksGrid类，进入工具箱，找到分页工具栏，并双击它。分页工具栏将被添加到BooksGrid类中（或者您可以从工具箱中拖动它并将其放在BooksGrid类上）。由于存储已经设置在网格上，它也将自动设置到分页工具栏上。

保存项目并查看 Sencha Architect 迄今为止创建的文件，我们会看到它已经在app/view目录中创建了一个名为BooksGrid.js的文件。

创建视口

我们下一步是创建一个视口。为此，选择视图包（步骤 1），在工具箱中找到Viewport组件并双击它（步骤 2）。从项目检查器中选择视图包中的MyViewport视图，进入配置面板，并设置一些属性：勾选initialView并将userClassName设置为Main（步骤 3）。最后，转到设计选项卡并点击空白区域。应该会显示一个蓝色边框。选择飞出配置按钮并选择fit作为布局，如以下截图所示（步骤 4）：

注意

要了解更多关于视口的信息，请访问docs.sencha.com/extjs/4.2.1/#!/api/Ext.container。要了解更多关于 Fit 布局的信息，请访问docs.sencha.com/extjs/4.2.1/#!/api/Ext.layout.container.Fit。

我们不能忘记始终在项目中保留 initialView。视图 类中必须有一个如图所示的高亮图标，否则当我们执行项目时将得到一个空白屏幕：

一旦我们保存项目并查看 Sencha Architect 到目前为止创建的文件，我们会看到它已经在 app/view 目录中创建了一个名为 Main.js 的文件。

将网格链接到视口

我们下一个目标是使 booksgrid 类成为我们创建的视口的项。所以，让我们继续前进并实现它。第一步是选择 booksgrid 类，然后将其拖放到 Main 类上：

将显示一个带有 复制 组件 问题的窗口。我们将选择 链接；这样，我们的 booksgrid 类将继续作为一个类，我们可以重用其代码。如果我们选择 复制，Sencha Architect 将将所有 BooksGrid 代码复制到 Main 类作为一个项。如果我们选择 移动，Sencha Architect 将删除 booksgrid 类并将所有代码放入 Main 类作为一个项。

结果，我们将看到一个蓝色线条连接 booksgrid 类和 Main 类。如果我们验证代码编辑器上的 Main 类源代码，我们会注意到 booksgrid 类是通过使用其 xtype（配置面板上的 userAlias 属性）被声明为视口的项：

在 Sencha Architect 中链接组件是一种很好的重用组件的方法。

到目前为止的输出

是时候执行我们的项目了。在工具栏上，点击 预览 图标。您的默认浏览器将打开一个类似这样的页面：

这是因为 Sencha Architect 认为包含我们应用程序（Sencha Architect 创建 app.html 文件而不是 index.html）所有代码的 app.html 页面部署在 web 服务器的 root 文件夹上，这并不正确。在我们的情况下，应用程序位于 htdocs/sencha-architect/extBooks 目录（htdocs 是 Xampp 的公共文件夹）。因此，我们需要在项目设置中设置正确的位置。在工具栏上，点击 设置 图标。将显示一个新窗口；点击 项目 选项卡，并将项目目录的完整路径放入以下截图所示（URL 前缀）：

现在，如果我们再次尝试执行项目，它将打开我们刚刚创建的网格的正确 URL：

但等等，网格是空的，在我们进行的测试中，服务器返回了一些数据。我们需要创建一个控制器，当网格渲染时加载存储；这样，我们将在网格内显示一些信息。

创建控制器

因此，要创建控制器，让我们回到项目检查器的顶部并再次点击+图标，然后选择Controller选项（步骤 1）。然后，在选择了控制器后，转到配置面板并将它的userClassname更改为Book（步骤 2）：

仍然在配置面板中，找到models、stores和views属性（步骤 3）。有了这些属性，我们将声明控制器将关心的models、stores和views。一旦您选择了一个模型、存储或视图，Sencha Architect 将显示以下带有问题的窗口。点击移除：

这是因为在应用程序（app.js）中，当我们创建模型、存储和视图时，它们将被声明在应用程序的models、views和stores属性中。通过这一步，我们将责任转移到控制器，并且不需要在app.js文件和控制器（如果我们点击保留按钮会发生的情况）中保留它们的声明。

下一步是将控制器****操作添加到书籍控制器中。为此，在项目检查器中选择书籍控制器，转到工具箱，找到控制器****操作，并双击它（或按需拖放），如步骤 1所示。一旦控制器****操作在书籍控制器下列出，选择它（步骤 2），转到配置面板，并将targetType选择为BooksGrid；然后在EventBinding中，选择我们想要监听的事件名称，即render。如果您愿意，可以将controlQuery改为更具体，并将BasicFunction（fn）的名称也更改（步骤 3）：

在这些步骤之后，代码编辑器将打开onGridpanelRender函数编辑器，因此我们可以添加我们想要的代码（我们需要输入步骤 4中显示的代码）。在这种情况下，渲染事件将网格引用（component）作为参数传递，还传递了一些选项（eOpts）。因此，我们需要获取网格引用（component），调用getStore方法以获取存储引用，然后调用load方法，以便存储可以从服务器加载数据（步骤 4）。

注意，我们在模型、存储、视图和控制器上进行了工作。到目前为止，Sencha Architect 已经为我们生成了所有代码。现在，只有在控制器操作中，我们才必须使用代码编辑器。

保存项目并查看 Sencha Architect 迄今为止创建的文件后，我们将看到它已经在app/controller目录中创建了一个名为Book.js的文件。

我们可以在工具栏上再次点击预览图标，现在我们将看到我们项目的最终版本。

最终的项目结构

既然我们已经使用 Sencha Architect 完成了第一个 Ext JS 项目的实现，让我们来看看为我们生成的代码：

注意到 Sencha Architect 为我们创建了所有文件（除了服务器端代码的 php 文件夹）。

非常重要的是要引起我们的注意，我们不能在代码编辑器上修改文件。如果我们修改了任何文件并尝试再次在 Sencha Architect 上打开它们，所有更改都将丢失，因为 Sencha Architect 将覆盖它们。所以，如果你决定想在代码编辑器上更改任何文件，重要的是要知道你将无法再次使用 Sencha Architect（如果你这样做，你将丢失这些修改）。

摘要

在本章中，我们学习了如何使用 Sencha Architect 实现我们的第一个 Ext JS 项目。我们学习了如何创建一个新的 Ext JS 项目，并使用应用程序设置 app.js 文件。我们还学习了如何创建模型、存储、视图和控制器，以及如何通过将其链接到另一个组件来重用组件。我们还学习了如何测试存储以查看信息是否正确从服务器加载，以及如何配置项目设置以执行第一次运行。

在下一章中，我们将使用 Sencha Architect 创建我们的第一个 Sencha Touch 应用程序。

第三章。创建 Sencha Touch 应用程序

在本章中，我们将使用 Sencha Architect 来构建我们的第一个 Sencha Touch 应用程序。我们将涵盖以下内容：

• 创建 Sencha Touch 项目

• 创建模型、存储、视图和控制器

• 首次执行项目

• 将 Sencha Touch 与 PhoneGap 集成

实现 Sencha Touch 应用程序

在我们实现我们的 Sencha Touch 应用程序之前，让我们看看本章结束时我们将要构建的内容：

这是一个简单的列表，列出了手机上可用的所有联系人。所有的 UI 设计都将使用 Sencha Touch 完成，并且为了从设备中检索原生联系人，我们将使用 PhoneGap。前面的截图是在 iPhone 上运行应用程序时拍摄的。我们将在本书的后面部分学习如何构建和准备在真实设备上执行的应用程序。

创建项目

首先，创建一个新的 Sencha Touch 项目；我们可以通过从欢迎屏幕或从工具栏中选择新建项目选项来完成此操作：

项目创建后，我们将看到登录屏幕，其中包括工具栏、画布、项目检查器、配置面板和工具箱。我们将立即保存我们的项目。为此，请点击工具箱中的保存或按Ctrl + S（在 Mac OS 上为cmd + S）。将显示保存项目屏幕。

我们将把项目保存在sencha-architect目录下的SenchaContacts中，这个目录和我们的 Ext JS 项目保存的目录相同。以下截图显示了保存项目屏幕：

现在项目已保存，我们可以开始实现它。我们将使用以下开发工作流程：首先实现模型，然后是存储，然后是视图，最后是控制器，直到我们的项目完成。

配置应用程序

第一步是设置本章我们将要开发的应用程序。在我们开始之前，在项目检查器中，选择应用程序（步骤 1），然后转到配置面板，找到属性名称，并将其值设置为Packt（步骤 2）。这是我们的应用程序命名空间，意味着所有类都将命名为Packt + package + className。如果我们打开代码编辑器，我们将看到的代码如下截图所示（步骤 3）：

所有这些配置都将应用于app.js文件，因为应用程序代表app.js文件。

你会注意到，在本章中我们将执行的大多数步骤与上一章中执行的操作非常相似。这是因为 Ext JS 和 Sencha Touch 共享部分 API，而且一旦你习惯了 Ext JS 或 Sencha Touch，学习第二个框架就会更容易。

创建模型

按照我们的开发工作流程，我们将从模型开始。在项目检查器的顶部，点击+图标并选择Model（步骤 1）：

一旦创建了模型，选择它，转到配置面板，并将类名（userClassName）设置为Contact（步骤 2）。然后，仍然在配置面板中，找到字段属性，点击其+图标并添加第一个字段，该字段命名为id。继续添加，直到我们创建了以下字段：id、displayName、phoneNumber、familyName和givenName（步骤 3）。这些字段代表设备上可用的某些字段。

由于我们有givenName和familyName，假设我们想要创建一个返回连接givenName和familyName字段的字段。因此，我们创建了displayName字段。所以为了完成我们想要的操作，我们需要为displayName字段创建一个convert()函数。为此，我们需要在项目检查器中选择displayName字段（步骤 4），找到convert属性并点击+图标（步骤 5），然后，一个绿色菱形图标将出现在convert属性左侧。这意味着在代码编辑器中创建了一个函数，并且它可供编辑。要转到代码编辑器，我们可以点击箭头图标（步骤 6）。然后我们可以添加将连接givenName和familyName字段的代码（步骤 7）。

如果我们回到项目检查器，联系模型应该如图所示（步骤 8）。如果我们查看画布，在设计模式下将不会显示任何内容，但如果我们查看代码编辑器，Packt.model.Contact类将被定义。如果我们尝试编辑其代码，我们会注意到唯一可编辑的代码是我们为displayName字段创建的convert()函数（当我们将鼠标悬停在convert()函数内容上时，将出现编辑图标）。任何其他更改都必须使用配置面板进行。

保存项目并查看 Sencha Architect 迄今为止创建的文件，我们会看到它在app/model目录中创建了一个名为Contact.js的文件。

创建商店

下一步是创建一个商店。我们的数据将来自设备，我们将使用特殊的代理和 PhoneGap 代码来加载它。这意味着我们可以创建一个使用 Ajax 代理的商店，因为在项目检查器的+菜单中，我们没有创建空商店的选项（无论是通过工具箱创建商店）。因此，我们需要回到项目检查器，再次点击+图标，选择Store，然后选择Json Store，如图所示：

在我们创建商店后，我们需要给它起一个名字。因此，在项目检查器中选择商店，转到配置面板，找到userClassName，并将其值设置为Contacts（这将成为商店的名称—步骤 1）。然后，我们还需要为其分配一个storeId，其值也将设置为Contacts（步骤 2）。创建商店后，我们还将看到一个红色的感叹号图标（步骤 3）。如果我们点击它（步骤 3），我们将看到一个错误消息，表示我们需要将一个模型与此商店关联或至少在商店上创建一个字段（步骤 4）。由于我们已经有了一个模型，我们可以点击项目检查器中的Store，转到配置面板，搜索model，然后可以从我们已创建的模型列表中选择（步骤 5）。

在这种情况下，我们只创建了Contact模型。最后，由于我们将使用自己的代理（而不是 Sencha Touch API 上可用的代理），我们可以通过选择它并右键单击它来删除代理，然后选择Delete选项（步骤 6）：

我们也可以通过直接点击Store选项（如下一张截图所示）来创建没有代理的商店，无需点击以下选项之一；Array Store、Direct Store等：

如本章前面所见，在从 iPhone 拍摄的截图中，一个字母将联系人分组（这个字母代表givenName的第一个字母—如果没有givenName，则为familyName）。我们将在稍后添加此配置，但将执行分组工作的类是商店。因此，为了做到这一点，我们需要从项目检查器中选择Contacts在Stores中，转到工具箱，选择数据，然后在Data Utilities下找到Grouper。双击它，将在Contacts商店中添加一个分组器。然后，在Contacts商店下选择MyGrouper，在配置面板上找到groupFn，并点击+图标（步骤 8）。在groupFn函数旁边将出现一个绿色菱形图标。点击箭头图标（步骤 9），代码编辑器将打开，这样我们就可以添加分组器代码（步骤 10）：

如果联系人有givenName，商店将使用其第一个字母进行分组；如果没有，则将使用familyName的第一个字母。如果联系人没有名字（这种情况可能发生），我们将返回"-"。覆盖所有情况非常重要，因为如果不这样做，当我们在真实设备上运行此示例时，联系人将不会出现在列表中。

保存项目并查看 Sencha Architect 迄今为止创建的文件后，我们将看到它已在app/store目录中创建了一个名为Contacts.js的文件。

创建联系人代理 – PhoneGap

我们的目的是从设备中加载联系人，因此我们将使用 PhoneGap 为我们进行原生访问。为此，我们需要使用 PhoneGap 代码创建自己的代理。所以请转到应用程序目录（sencha-architect/SenchaContacts），然后在app文件夹内创建一个名为proxy的新文件夹，并创建一个名为ContactsProxy.js的文件，如下面的截图所示：

在ContactsProxy.js文件中，我们将添加以下代码（使用您选择的代码编辑器——记事本、Sublime Text、Eclipse 等）——遗憾的是，这是我们不能从 Sencha Architect 中完成的事情，因为它仅限于模型、存储、视图和控制器包：

Ext.define('Packt.proxy.ContactsProxy', { // #1
    extend: 'Ext.data.proxy.Proxy', // #2
    alias : 'proxy.contactstorage', // #3
    constructor: function(config) { // #4
        var me = this;
        config = config || {};
        me.callParent([config]);
    },
    create: function(operation, callback, scope) { }, // #5
   update: function(operation, callback, scope) { }, // #6
   destroy: function(operation, callback, scope) { } // #7
});

这是我们的代理的骨架。创建自定义代理是一个高级话题，需要一些对 API 源代码的了解。所以让我们一步一步来。首先，我们有类的定义（#1），它遵循 Sencha 命名约定。

注意，Packt是我们为应用程序选择的命名空间，proxy是包名，ContactsProxy是我们创建的.js文件的名称。然后我们扩展了 Sencha Touch API 中的代理类（#2）。接下来，我们创建了一个别名，这样我们就可以在定义联系人存储中的代理时使用contactsstorage类型（#3）。在代码之后，我们有默认的构造函数（#4），然后是我们代理需要的函数签名：create()（#5）、update()（#6）和destroy()（#7）。我们不会实现这些函数。我们将实现的是read()，我们将将其添加到ContactsProxy类中：

read: function(operation, callback, scope) {
    var thisProxy = this;
    var fields = ['id', 'name', 'phoneNumbers']; // #8
    navigator.contacts.find(fields,
        function(deviceContacts) { // #9
            //loop over contacts and create Contact model instance
            var contacts = [];
            for (var i = 0; i < deviceContacts.length; i++){// #10
                var deviceContact = deviceContacts[ i ];

                var phone = "";
                if (deviceContact.phoneNumbers){ // #11
                    phone = deviceContact.phoneNumbers[0];
                    if (phone){
                        phone = phone.value;
                    } else{
                        phone = "";
                    }
                }
                // #12
                contacts.push(Ext.create('Packt.model.Contact',{ 
                        id: deviceContact.id,
                        givenName: deviceContact.name.givenName,
                        familyName: deviceContact.name.familyName,
                        phoneNumber: phone
                    }));
                }
            //return model instances in a result set
            operation.setResultSet( // #13
                Ext.create('Ext.data.ResultSet', {
                    records: contacts,
                    total  : contacts.length
                })
            );
            //announce success
            operation.setSuccessful(); // #14
            operation.setCompleted();
            //finish with callback
            if (typeof callback == "function") { // #15
                callback.call(scope || thisProxy, operation);
            }
        },
        function (e) { // error handling from PhoneGap
            console.log('Error fetching contacts'); // #16
        },
        {multiple: true} // #17
    );
}

在read()方法中，我们有 Sencha 和 PhoneGap 代码的混合。为了读取联系人，我们将使用一个 PhoneGap 函数（有关更多信息，请参阅docs.phonegap.com/en/2.6.0/cordova_contacts_contacts.md.html#Contacts）。navigator.contacts.find()函数需要搜索的contactFields（#8），在 PhoneGap 能够成功读取联系人时的成功函数（#9），一个错误回调（#16），以及一些选项（#17）。

我们最大的兴趣在于success()函数（#9）。首先，我们将遍历设备返回给 PhoneGap 的每个联系人（#10）。我们将提取一个电话号码（#11——联系人可以有多个电话，在这种情况下，我们将只检索第一个）。然后我们需要使用从设备提取的信息创建一个联系人模型实例（#12）。我们将把这个联系人模型实例推入一个数组。最后，我们需要将信息（联系人模型实例及其总数）设置到ResultSet中，以便 Ext JS 联系人存储可以理解这些信息（#14）并将operation设置为成功和完成（#14）。最后，我们需要通知 Ext JS 回调函数（#15）。

然后，联系人存储将理解我们从设备检索到的信息。当我们从存储中调用load()方法时，将调用read()函数。我们将在控制器部分看到如何在存储中应用此代理。

创建列表视图

在下一步中，我们将创建我们的视图，即联系人列表。有两种创建视图的方法。你可以选择你最喜欢的一种。第一种方法需要选择项目检查器上的Views包（步骤 1）；转到Toolbox并找到Grid Panel组件，然后双击它（步骤 2）。在Views下将创建一个新的列表视图MyList：

然后，在列表创建后，我们需要从项目检查器中选择它，找到userAlias，并将其值设置为contactsList，并将userClassName也设置为contactsList（步骤 3）。仍然在配置面板上，我们还需要为列表设置一个store（步骤 4）。

创建视图的第二种方法是选择组件从Toolbox，并将其拖放到Views包内部（或者它也可以是Views、Stores、Models或Controllers包）：

下一步是更改itemTpl。itemTpl是我们将显示为ContactsList项目的信息的模板。在这种情况下，我们希望以粗体显示givenName，并以常规字体显示familyName，如下面的屏幕截图所示：

小贴士

如果我们在项目检查器中双击itemTpl，代码编辑器将显示出来，然后我们可以像前一个屏幕截图所示那样编辑itemTpl。

为了使我们的列表看起来更美观，让我们给它添加一个工具栏。从项目检查器中选择ContactsList，然后转到工具箱并找到Toolbar组件；双击它（步骤 5）。然后，从项目检查器中选择Toolbar，转到配置面板，找到title，并将其值设置为My Contacts（步骤 6）。设置工具栏标题的另一种方法是使用设计视图，通过双击来更改标题：

我们的最后一步是添加索引栏并对列表进行分组。所以首先，为了添加索引栏，从项目检查器中选择ContactsList，转到Toolbox | Views，并找到List Index Bar组件（步骤 8），这是我们唯一需要做的事情。如果我们转到代码编辑器，我们会看到 Sencha Architect 添加了属性indexBar: true。

最后，再次从项目检查器中选择ContactsList，转到配置面板，找到grouped属性复选框，并勾选它。这将向代码编辑器中添加属性grouped: true。

保存项目并查看 Sencha Architect 迄今为止创建的文件，我们会看到它已经在app/view目录中创建了一个名为ContactsList.js的文件。

创建控制器

因此，要创建控制器，让我们回到项目检查器的顶部并再次点击+图标，然后选择Controller选项（步骤 1）。然后，选择Controller，转到配置面板，并将它的userClassName更改为Contacts（步骤 2）：

仍然在配置面板中，定位到models、stores和views属性（步骤 3）。使用这些属性，我们将声明这个控制器将关注的模型、存储和视图。一旦选择Model、Store或View，Sencha Architect 将显示一个带有问题的窗口，如下截图所示。点击移除：

这是因为在应用程序（app.js）中，当我们创建模型、存储和视图时，它们将被声明在应用程序的models、views和stores属性中。通过这一步，我们将责任转移到控制器，并且不需要在app.js应用程序和控制器（如果我们点击保留按钮会发生的情况）上保留它们的声明。

下一步是为联系人控制器添加一个新的Controller Action。要做到这一点，在项目检查器中选择联系人控制器，转到工具箱，找到Controller Action，并双击它（或拖放），如步骤 4所示。一旦Controller Action在联系人控制器下列出，选择它，转到配置面板，并将targetType选择为ContactsList（步骤 5）；然后，在EventBinding中，选择我们想要监听的事件的name，即show。如果您愿意，可以将controlQuery改为更具体，以及通过更改fn来更改BasicFunction的名称。

然后在代码编辑器中，我们将添加我们希望在ContactsList显示时发生的逻辑，即加载其Store，这样 PhoneGap 就可以从设备中加载联系人。但实际情况是联系人存储没有设置代理，因此我们可以设置contactsstorage，这是我们使用setProxy()方法创建的代理。这是我们可以做到的最简单的方法。另一种方法是在联系人存储上创建一个覆盖，但这是一个高级主题，我们将在下一章中学习。

在 onListShow() 方法的第 26 行，我们有 document.addEventListener('deviceready') 声明。这是一段 PhoneGap 代码，当设备准备好使用时将会触发。然后，作为一个函数，我们加载 ContactsList 存储。由于我们创建的代理使用了 PhoneGap 代码，我们需要确保只有在设备准备好使用时才调用它。

保存项目并查看 Sencha Architect 到目前为止创建的文件后，我们会看到它在 app/controller 目录中创建了一个名为 Contacts.js 的文件。

我们可以再次在工具栏中点击预览图标，现在我们将看到我们项目的最终版本，但首先我们需要设置 URL 前缀，如下截图所示：

然后，通过点击工具栏中的 预览 按钮，浏览器将被打开，但它不会显示任何内容，因为浏览器不是一个设备。要显示任何联系人，我们需要使用模拟器或在真实设备上测试应用程序；我们将在本书的后面部分学习这一点。

添加 PhoneGap

由于我们已经编写了所有需要做的代码，剩下要做的就是将 PhoneGap js 文件添加到我们的 Sencha Architect 项目中。要做到这一点，在项目检查器中选择 资源，转到工具箱，选择 资源，然后双击 JS 资源。然后，在配置面板中，给它一个 id（phonegap）并将 URL 设置为 phonegap 文件（在这种情况下我们使用的是可以从 phonegap.com 获取的 cordova-2.5.0.js）。然后我们就完成了！

最终项目结构

在使用 Sencha Architect 完成我们的第一个 Sencha Touch 项目实现后，让我们看看为我们生成的代码，如下截图所示：

注意到 Sencha Architect 为我们创建了所有文件（除了代理）。

与 Ext JS 项目类似，我们必须注意，我们不能在代码编辑器中修改文件。如果我们修改了任何文件并尝试再次在 Sencha Architect 中打开，所有更改都将丢失，因为 Sencha Architect 将会覆盖它们。所以，如果你决定在代码编辑器中更改任何文件，重要的是要知道你将无法再次使用 Sencha Architect（如果你这样做，你将丢失这些更改）。

摘要

在本章中，我们学习了如何使用 Sencha Architect 实现我们的第一个 Sencha Touch 项目。我们学习了如何创建一个新的 Sencha Touch 项目，以及如何使用应用程序设置 app.js 文件。我们学习了如何创建模型、存储、视图和控制器，我们还介绍了如何将我们的 Sencha Touch 项目与 PhoneGap 集成，这是一个高级主题。

在下一章中，我们将学习一些技巧和窍门，例如多语言应用、创建覆盖、导出和导入项目，以及更多内容。

第四章.技巧与窍门

在本章中，我们将学习如何使用 Sencha Architect 的一些功能。换句话说，我们将学习一些简短的食谱，了解如何完成一些可以帮助我们在开发 Sencha Architect 项目时受益的任务，例如：

• 使用第三方插件（非原生插件）

• 将 HTML 代码添加到 index HTML 页面

• 导入现有项目

• 创建可重用自定义组件（团队项目）

• 多语言应用

• Sencha Architect + Eclipse

在我们开始之前，我们将把本章将要创建的示例保存在 sencha-architect/chapter04 文件夹中。

导出和导入现有项目

假设你正在处理一个非常酷的项目，并想与某人分享。你不需要压缩整个项目文件夹并发送它。Sencha Architect 有更好的方法来做这件事。

例如，假设我们想要将第一章中开发的项目（extBooks）通过电子邮件发送给朋友。因此，在用 Sencha Architect 打开项目后，我们将选择 文件 | 归档项目 (步骤 1)。Sencha Architect 将询问您希望将项目保存到何处；让我们选择我们创建的 chapter04 文件夹，并将文件保存为 ExtBooksChp02 (步骤 2)。Sencha Architect 将以 .xda 扩展名保存文件 (步骤 3)。

此文件包含 extBooks 项目的所有文件，包括 php 文件：

现在，让我们假设我们已将文件通过电子邮件发送给朋友，而这个朋友也想使用 Sencha Architect 打开项目。因此，我们的朋友需要打开 Sencha Architect，转到 文件 | 导入归档 (步骤 4) 并选择我们发送的 .xda 文件 (步骤 5)。项目将被打开，如果这个朋友想将项目保存到本地运行，他/她只需点击 保存，并给它起一个名字——例如：chap02 (步骤 6)：

如果我们进入项目目录，我们将看到如下截图所示的完整项目：

.xda 文件非常紧凑。这是共享 Sencha 项目文件的好方法。对于源代码控制，建议将所有项目文件放在您的源代码控制系统（.git、.svn 等）下。

使用 Sencha Architect 与 Eclipse

Sencha Architect 是一个优秀的 IDE，尽管它是为 Sencha 框架定制的，但这并不意味着你不能与你的 favorite IDE（如 Eclipse、Netbeans、Visual Studio、Aptana 等）一起使用。在本主题中，我们将演示如何使用 Sencha Architect 与 Eclipse，你可以用同样的逻辑来使用任何其他 IDE。

假设我们正在开发一个 Java 项目，前端将使用 Ext JS 开发，因此我们将使用 Sencha Architect 来为我们处理所有的 Ext JS 代码。如果我们查看使用 Eclipse 创建的 Java Web 项目的结构，我们将看到如下所示的截图：

在 WebContent 中，我们将添加我们的 JSS、CSS 和 HTML（或 JSP）文件，因此 Ext JS 代码必须位于 WebContent 文件夹内。我们如何保存 Sencha Architect 项目，以便我们能够得到我们需要的 exactly what we need？当我们保存 Sencha Architect 项目时，我们需要选择 Eclipse 项目作为根文件夹（Save Path:），而 Project Name: 将如以下截图所示：

这样所有 Ext JS 代码都将位于 WebContent 内，我们可以使用 Eclipse 作为 Java 代码的代码编辑器，而使用 Sencha Architect 作为 Ext JS 代码的编辑器。项目将看起来如下所示截图，这正是从 Java 网络项目中期望得到的样子：

创建可重用自定义组件

您使用 Sencha Architect 创建了一个非常酷的组件，现在您想与世界分享它，以便其他开发人员也可以在他们的项目中使用此组件。这是否可能？答案是肯定的！

您也可以使用此功能与您的开发团队共享组件，甚至在其他 Senha Architect 项目中重用相同的组件。由于 Ext JS 和 Sencha Touch 共享部分 API，特别是数据包，您还可以使用此功能将模型和存储从 Ext JS 项目导入到 Sencha Touch 项目，反之亦然！

要做到这一点，您需要选择 模型、存储、视图或控制器，右键单击它，然后单击 导出到文件… 选项。在以下截图中，我们正在从 extBooks 项目（chap02）导出 Book 模型（步骤 1）。接下来，我们需要保存它——我们将将其命名为 BookModel（步骤 2）。一旦保存，Sencha Architect 将以 .xdc 扩展名保存它（步骤 3）：

要导入它，我们需要转到 编辑 | 导入组件… 并选择 BookModel.xdc 文件（步骤 4）。Sencha Architect 将组件保存到工具箱中，因此我们可以给它一个 名称 并为其选择一个 类别（步骤 5）。然后我们可以转到工具箱并像使用任何其他工具箱组件一样使用它（步骤 6）：

如果您想在未来的项目中重用 视图，您也可以使用 保存到工具箱… 选项（步骤 7）。它也会询问您要将视图保存到哪个 名称 和哪个 类别（步骤 8）。然后，BooksGrid 也将可在工具箱中使用（步骤 9）：

正如我们在第二章中已经学到的，创建 Ext JS 应用和第三章，创建 Sencha Touch 应用，要使用工具箱中的组件，我们可以从项目检查器中选择视图、模型、存储或控制器，当我们双击工具箱组件时，它将作为项目检查器所选项目的子项创建，或者如果我们选择包，它将作为模型、存储、视图或控制器创建。

将 HTML 代码添加到 app.html 文件中

到目前为止，我们已经了解到，除非是为了函数或模板，否则我们无法在 Sencha Architect 中编辑代码。如果我们查看 Sencha Ext JS 示例(www.sencha.com/products/extjs/examples/)，我们会看到许多示例在示例的 index.html 中包含 HTML 标签（DIV、P）。如果我们想创建类似的应用程序，这是可能的吗？答案是肯定的。

您将无法手动编辑 app.html 文件以添加您想要的 HTML 代码。正如我们在第二章中看到的，创建 Ext JS 应用和第三章，创建 Sencha Touch 应用，如果您更改了 Sencha Architect 生成的任何文件，当您在 Sencha Architect 中打开相同的项目时，它将用原始代码覆盖您所有的更改。

但我们如何添加 HTML 代码呢？答案是使用 Sencha 代码（也称为 Ext Core）进行 DOM 操作，这在 Ext JS 和 Sencha Touch 框架中都是可用的。

要这样做，当我们创建 Sencha Architect 应用程序（Ext JS 或 Sencha Touch）时，从项目检查器中选择应用程序图标（步骤 1），转到配置面板，找到启动函数，并单击+图标（步骤 2）。然后，将出现一个绿色菱形图标，我们可以单击箭头图标（步骤 3），如下面的截图所示：

代码编辑器将打开，我们可以使用 Ext Core 来操作 DOM。在这种情况下，我们正在将 HTML 标签追加到 HTML 主体中：

如果我们运行项目，输出将如下面的截图所示：

使用第三方插件（非原生插件）

当我们想要开发 Sencha API 中不可用的东西时，插件非常有帮助。已经原生支持的插件在 Sencha Architect 中作为选项提供，但还有许多其他开发者共享的插件，我们可以在 Sencha 论坛上找到。

我们在这里想关注一个特定的案例，因为我们已经看到了如何添加一个新属性，并且对于某些组件，我们可以轻松地添加插件或功能属性，然后添加插件配置。但是，API 支持原生插件的组件不允许我们这样做，例如，Ext JS 的网格面板：

我们只能在 Sencha Architect 内部使用的插件和功能。如果我们想使用第三方插件或功能，比如 Filter 插件呢？这是可能的，但我们需要使用 Sencha Architect 的一个高级功能，即“创建覆盖”。关于覆盖的声明：这必须避免。只要可能，使用设置方法来更改属性。覆盖应该是你的最后选择，并且应该非常小心地使用，因为如果你不谨慎使用，你可能会改变组件的行为，导致某些功能停止工作。但我们将演示如何以安全的方式完成它！

我们将在这个主题中使用 BooksGrid 作为示例。假设我们需要在它上使用 Filter 插件，因此我们需要首先创建一个覆盖。为此，从项目检查器中选择 BooksGrid，打开代码编辑器，然后单击 创建覆盖 按钮（步骤 1）。Sencha Architect 将显示一个警告（步骤 2）。我们可以单击 是 继续操作：

代码编辑器将打开（步骤 3）覆盖类，这样我们就可以输入我们的代码。在这种情况下，我们将对这个文件有完全的自由去做我们需要做的任何事情。所以让我们添加 features() 函数，其中包含插件的声明，以及 initComponent() 函数，如以下截图所示（步骤 4）：

有一件事非常重要，那就是我们必须调用 callParent() 函数（callOverriden() 在 Ext JS 4.1 及以后的版本中已经弃用）以确保我们继续拥有组件的所有原始行为（在这种情况下是 BooksGrid 类）。我们唯一想要做的是向其中添加一个新功能。

我们已经完成了覆盖！要回到原始类，我们可以使用以下截图所示的导航器：

注意到 requires 已经添加到 Packt.view.override.BooksGrid 类中，这是我们刚刚编写的类。下一步是在需要类中添加插件。为此，我们需要选择 BooksGrid，转到配置面板，并添加具有插件名称的 requires（Ext.ux.grid.FiltersFeature）：

一些开发者喜欢直接将插件文件作为 JavaScript 文件添加到app.html/index.html中。Sencha 提供了动态加载功能，所以让我们利用它并使用它！首先，我们不能忘记在项目根目录中添加包含插件的ux文件夹，如下面的截图所示：

接下来，我们需要设置应用程序加载器。从项目检查器中选择应用程序（步骤 5），然后转到配置面板，找到加载器配置属性，点击+图标（步骤 6），然后点击箭头图标（步骤 7）。加载器的详细信息将在配置面板上显示。定位到paths属性并点击它（步骤 8）。代码编辑器将以加载器路径的默认值打开，该默认值为{"Ext": "."}（步骤 9）。不要删除它；只需添加Ext.ux命名空间的路劲，即ux文件夹的路劲（步骤 10）：

我们几乎完成了！我们需要在每个我们希望用户能够过滤其值的列中添加filterable选项（步骤 11）：我们可以使用配置面板添加一个新属性（首先我们需要从项目检查器中选择所需的列——始终记得这样做）。然后，我们可以选择我们想要添加的属性类型（步骤 12和步骤 14）。例如，我们可以为id列添加filterable: true（步骤 13）以及为Name列添加filterable: {type: 'string'}（步骤 15和步骤 16），如下面的截图所示：

插件已经准备好使用！

创建多语言应用程序

另一个非常有用的功能是拥有一个多语言应用程序，许多开发者尝试在 Sencha Architect 中实现它。问题是，我们通常有一个 JavaScript 对象，其中包含我们想要应用于应用程序上文本的翻译。例如，假设我们想要翻译BooksGrid；首先我们需要创建一个包含所需翻译的 JavaScript 文件（每个网格列一个）：

translation = {
    books: 'Livros',
    id: 'Id',
    name: 'Nome',
    author: 'Autor(a)',
    language: 'Língua',
    paperback: 'Folhas',
    release: 'Lançamento',
    isbn: 'ISBN',
    isbn13: 'ISBN13'    
};

上述代码包含葡萄牙语翻译。我们想要使用的方式是将翻译值应用于特定列，而我们需要使用的列标签如下面的代码所示：

xtype: 'gridcolumn',
dataIndex: 'author',
text: translation.author

发生的事情是，Sencha Architect 上的文本属性只允许你输入一个字符串，你不能将对象作为文本属性值输入；我们如何解决这个问题？我们有两种选择：每当用户更改语言时，我们可以调用setText()或setTitle()方法，为应用程序上的所有组件传递新的值。但这太麻烦了。或者，我们可以使用覆盖。在我们的情况下，因为我们已经从一个先前的主题中有了覆盖，我们只需要向其中添加以下代码：

columns: [
    {
        xtype: 'gridcolumn',
        width: 53,
        dataIndex: 'id',
        text: translation.id
    },
    {
        xtype: 'gridcolumn',
        dataIndex: 'name',
        text: translation.name,
        flex: 1
    }
    // other columns
]

然后多语言应用程序也准备好了。

创建 util 和自定义类

在你将要参与的大多数项目中，你可能需要创建带有可重用函数或被视为常量的属性的util类。你还可以在 Sencha Architect 中使用它们。所以假设我们需要创建一个函数，该函数将两个给定的值相加并返回结果。这个函数可以在你的项目的多个地方使用，并且与任何业务逻辑无关。因此，我们需要创建一个类。Sencha Architect 提供了创建存储、模型、控制器和视图的能力，但我们想创建另一种类型的类。我们可以通过项目检查器顶部的+图标创建一个 Ext 类（步骤 1）。然后，点击类，并选择你想要创建此类的包。

让我们在控制器包内创建。Sencha Architect 将列出新的类，并在所需包下显示 ext 图标（步骤 2）。接下来，你可以给你的类命名，一个别名，并选择其他选项，例如单例：true（步骤 3）：

在这样的类中，你可以添加属性和函数，但你将受到所有更改都必须通过配置面板进行的限制。这不是一个你可以完全控制的覆盖文件。

例如，让我们创建我们之前提到的求和函数。我们需要转到函数并点击+图标（步骤 4——在配置面板上），为我们的函数命名，然后点击下一步（步骤 5），然后输入参数（步骤 6），然后会出现一个箭头图标（步骤 7），如果我们点击它，代码编辑器将打开，我们可以输入我们的代码（步骤 8）。如果我们需要更改任何配置，例如函数名或添加、编辑或删除参数，我们可以使用配置面板（步骤 9）来完成。并且像往常一样，我们将拥有由 Sencha Architect 生成的代码（步骤 10）：

如果我们想使用sum()函数，我们可以简单地调用Packt.controller.Utils.sum(1,2)，返回值将是3！

如果你真的想对代码有完全的控制权，可以创建一个Ext类，然后创建一个覆盖。这样，它将类似于使用任何代码编辑器。但在这个情况下，你将无法使用 Sencha Architect 的功能。

如果你尝试更改扩展类（默认为Ext.Base）为Ext.grid.Panel等，Sencha Architect 将识别这个类是受工具支持的，并将询问你是否想要转换（如果回答是，它将类似于从工具箱中选择组件）。如果不是，你将拥有自由创建每个属性或函数（Sencha Architect 将不会在配置面板上列出可用的属性，但你将能够添加自己的功能和插件，例如）：

与子包一起工作

当我们在 MVC 架构和 Sencha 项目中工作时，我们已经在使用四个帮助我们更好地组织应用程序的包：model、view、controller 和 store。但是当我们的应用程序开始增长并且我们有很多类时，在每个包内部进一步组织类是正常的。

在 Sencha Architect 中创建子包非常简单。让我们假设我们想要创建一个名为 Profile 的新视图。如果我们命名类为 Profile (userClassName)，则此类将在 app/view 目录内创建。但如果我们想让它创建在 app/view/security 中，我们需要命名 ID 为 security.Profile (步骤 1)：

在项目检查器中，类不会由子文件夹分开；我们将只看到点 (.) 将类的名称与其子包分开 (步骤 2)。但在项目的文件夹中，我们可以看到 Sencha Architect 为我们创建了子文件夹 (步骤 3)。如果我们需要快速搜索，我们始终可以使用项目检查器顶部的快速打开选项 (步骤 4)。

我们可以创建我们需要的任意数量的子包。我们只需要用点 (.) 分隔子包的名称，如下例所示：package1.package2.package3.NameOfTheClass。

摘要

在本章中，我们学习了一些有用的技巧，这些技巧可以帮助我们在使用 Sencha Architect 处理 Sencha 项目时完成日常任务。我们学习了高级主题，例如创建覆盖以使用第三方插件和功能，以及实现多语言应用程序。我们了解到可以使用 Sencha Architect 与我们喜欢的 IDE 一起使用，创建自定义组件以在开发团队内部或甚至其他开发者之间共享，以及如何将组件保存到工具箱中以便在其他项目中重复使用。我们还学习了如何在 Sencha Architect 中操作 DOM，以便向 app.html 页面添加 HTML 标签，并创建类似于 Ext JS 示例中的项目。

在下一章中，我们将学习如何处理资源。我们将学习如何更改 SDK 路径，创建新的 CSS 和 JS 文件，处理 Google Maps 以及其他示例。

第五章。使用资源

在本章中，我们将学习如何使用项目检查器中的资源工具箱和资源包。因此，在本章中，我们将涵盖：

• 更改 Ext JS 和 Sencha Touch SDK 路径

• 调试模式和发布模式

• 创建新的 CSS 文件

• 使用 Google Maps

• 使用主题文件

• 使用额外的 JavaScript 文件

库资源

当我们在 Sencha Architect 上创建 Sencha Touch 或 Ext JS 项目时，我们将能够看到一个包含库资源的资源包。根据我们用于创建项目的 SDK 版本，选项可能会有所不同。

例如，如果我们创建一个 Ext JS 4.1 项目，我们将有默认的库选项，例如调试、包含 CSS、包含 JavaScript和库 基本 路径。当我们创建一个 Ext JS 4.2 项目时，我们将看到所有已提到的选项，以及如以下截图所示的主题属性：

同样，Sencha Touch 2.1 项目和 Sencha Touch 2.2 项目也会发生相同的情况：

这是因为 Sencha 为 Sencha Touch 2.2 及以后版本和 Ext JS 4.2 及以后版本增加了更改主题的功能。

那么每个选项代表什么（调试、包含 CSS、包含 JavaScript、库基本路径）？

调试选项意味着，如果我们想使用调试或生产版本的 SDK。默认情况下，Sencha Architect 将使用ext-all.js和sencha-touch-all.jsSDK 文件。如果我们勾选调试复选框，Sencha Architect 将使用ext-all-debug.js和sencha-touch-debug.jsSDK 文件。

默认情况下，Sencha Architect 也勾选了包含 CSS属性。这意味着 Sencha Architect 将自动将 Ext JS 和 Sencha Touch CSS 文件（ext-theme-classic-all.css和sencha-touch.css）添加到app.html文件中。但如果我们需要 CSS 具有 Ext JS 和 Sencha Touch 框架提供的美丽外观，为什么 Sencha Architect 会给开发者提供添加 CSS 文件的选项？我们将在本章后面回答这个问题。

包含 JavaScript 选项也被选中。当此选项被选中时，Sencha Architect 将 ext-all.js 和 sencha-touch-all.js SDK 文件包含在 app.html 中。同样的问题：如果我们需要 Ext JS 或 Sencha Touch SDK 来创建 Ext JS 或 Sencha Touch 应用程序，为什么 Sencha Architect 提供从 app.html 中移除这些文件的可能性？如果你已经使用 Sencha Cmd 生成了一个 Sencha Touch 或 Ext JS 项目，你会在 index.html 文件中注意到，它包含了一个不同的文件作为 bootstrap.js 文件，在这个 bootstrap.js 文件中我们有添加生产或调试文件的逻辑。因此，如果我们取消选中 包含 JavaScript 属性，我们可以通过添加一个新的 JS 资源来包含 bootstrap.js 文件。在将哪些文件包含在 app.html 文件中时，Sencha Architect 非常灵活。

设置本地 SDK

另一个引起我们注意的属性是库基本路径。当我们创建一个 Sencha Architect 项目时，Ext JS 4.2 项目的库基本路径是 cdn.sencha.com/ext/gpl/4.2.0/，而对于 Sencha Touch 2.2 项目则是 cdn.sencha.com/touch/sencha-touch-2.2.0-rc/。这意味着每次你执行你创建的应用程序时，你的应用程序都会从 Sencha 服务器加载 SDK JS 文件和 CSS 文件。

如果你正在本地测试你的应用程序，或者你想要从特定位置加载框架资源，我们需要更改库基本路径。例如，在下面的屏幕截图中，我们正在从本地服务器加载 Ext JS 框架文件：

这在你乘坐飞机并想要继续编码你的项目，而你又没有互联网访问时也非常有用，因此你可以指向你的本地安装。

升级项目

这又是 Sencha Architect 在很多方面帮助我们的一种场景。开发一个真正的大 Ext JS 或 Sencha Touch 项目可能需要一段时间。我们通常从框架的最新版本开始开发项目；然而，Sencha 会发布带有修复和新组件的框架新版本。我们想要这些修复，因此出于这个原因，我们也想升级项目。

Sencha Architect 还提供了升级功能。要升级一个项目（只要 Sencha Architect 已经支持这个新版本），我们需要选择库并右键单击它。会出现一个升级选项。一旦点击它，我们需要确认我们确实想要升级，因为一旦升级就没有回头路了。Sencha Architect 还会为项目的安全创建一个存档备份：

在前面的截图中，我们升级了一个使用 Ext JS 4.0 构建的项目。因此，我们可以首先升级到 Ext JS 4.1.x，或者我们可以直接更新到 Ext JS 4.2.x。此外，在先前的截图中，我们从 Ext JS 4.0.x 升级到 Ext JS 4.1.x。如果我们再次尝试升级，则只有升级到 Ext JS 4.2.x选项将可用，如下面的截图所示：

同样的功能也适用于 Sencha Touch：

注意

对于这些示例，我们使用了一个现有的 Ext JS 项目（arrayGrid），可在github.com/loiane/sencha-extjs4-examples-architect/tree/master/grid/arrayGrid找到，以及可在github.com/loiane/sencha-touch2-examples-architect/tree/master/TouchTwitterSearch找到的Touch Twitter Search。

原生主题

对于 Ext JS 4.2 和 Sencha Touch 2.2 项目，库也会显示主题属性。我们可以切换到另一个可用的主题（原生主题），如下面的截图所示：

如果我们在 Sencha Architect 中更改主题，我们将在画布的设计模式下立即看到变化：

对于 Sencha Touch 也会发生同样的事情：

我们将在本章末尾了解如何处理自定义主题。

创建/链接 CSS 和 JavaScript 文件

在整本书中，我们学习了如何使用 Sencha Architect 创建 Sencha 代码。但 Ext JS 或 Sencha Touch 项目并不意味着我们只会拥有 Ext JS 或 Sencha Touch 代码。我们还可以有额外的 JS 和 CSS 文件。

因此，让我们看看如何创建新的 CSS 和 JS 文件（CSS 和 JS 文件的逻辑是相同的）。首先，我们需要从项目检查器中选择资源，然后转到工具箱，找到资源，并双击我们想要创建的资源（步骤 1）。或者，我们也可以使用我们在前几章中学到的拖放功能。然后，一个新的 CSS 或 JS 文件将在资源包下显示。我们需要选择它，并在配置面板中我们可以给出一个id（仅用于帮助我们识别文件）和它的url（步骤 2）。然后，如果我们转到画布并打开代码编辑器，我们将能够编辑此文件（步骤 3）：

如果文件不存在，Sencha Architect 将在设置为url的路径上为我们创建它（如果是本地路径）。如果文件已存在，Sencha Architect 将为我们加载它，如下面的截图所示：

由于它是一个现有文件，它将被锁定以防止更改。如果您想对其进行更改，只需单击解锁，然后您将可以自由地添加、编辑或删除所需的代码。

使用 Google Maps

对于 Sencha Touch 项目，可以将 Google Maps API 资源添加到项目中。此资源将在 app.html 文件中添加一个新的 JavaScript 文件声明，指向 Google Maps API URL。

要添加它，从项目检查器中选择资源，进入工具箱，找到资源，然后双击Google Maps API资源。它将被添加到项目检查器的资源包下。我们不需要在配置面板上做任何更改。

只有 Sencha Touch 项目才有此资源选项。但如果我们想在 Ext JS 项目上添加 Google Maps API，我们可以简单地添加一个指向先前演示的相同 URL 的新 JS 资源。

使用自定义主题

我们已经学习了如何在 Sencha Architect 中使用原生主题。但创建和自定义主题很有趣，我们还想在我们的 Sencha Architect 项目中使用自定义主题。这是可能的！

记得我们问过为什么 Sencha Architect 允许我们禁用库中的包含 CSS选项？这是其中一个原因。所以如果我们想使用自定义主题，我们需要禁用包含 CSS选项并添加我们自己的主题。添加自定义主题与将现有 CSS 资源添加到项目非常相似。首先，我们从项目检查器中选择资源。然后我们需要进入工具箱，找到资源选项，然后双击CSS 资源。代表自定义主题的 CSS 文件必须已经存在于项目的目录中。因此，我们进入这个新 CSS 资源的配置面板，并添加 my-theme.css 文件的相对路径。

最后，主题被包含在 app.html 文件中。

当我们重新加载画布的设计视图时，CSS 将应用于项目，我们可以立即看到其外观，如下面的截图所示：

只需记住，我们首先需要生成主题。Sencha Architect 并不是一个帮助我们创建主题的工具；我们需要使用 Sencha Cmd（以及 Sass 和 Compass）来完成这项工作。

注意

有关为 Ext JS 创建主题的更多信息，请访问 docs.sencha.com/extjs/4.2.1/#!/guide/theming，以及 Sencha Touch 请访问 docs.sencha.com/touch/2.2.1/#!/guide/theming。

摘要

在本章中，我们学习了如何向 Sencha Architect 项目添加一些额外的资源，例如新的 CSS（或现有的），新的 JavaScript 文件（或现有的），如何更改主题，以及如何应用由您或任何其他开发者创建的自定义主题，如何升级 Ext JS 或 Sencha Touch SDK 版本，以及如何与 Google Maps 一起工作。有了所有这些资源，我们可以增强我们的项目。

在下一章中，我们将学习如何构建、打包和部署 Sencha Architect 项目。

第六章：模拟、构建、打包和部署应用程序/项目

在本章中，我们将学习如何通过预览（在浏览器中进行测试）、打包、构建和部署来准备应用程序以供生产使用。因此，在本章中，我们将涵盖：

• 预览和发布 Ext JS 项目

• 预览和发布 Sencha Touch 项目

• 模拟 Sencha Touch 应用

• 打包 Sencha Touch 应用

预览、发布和构建项目

在本节中，我们将学习工具栏中的构建、发布和预览按钮的功能。这些按钮对于 Ext JS 项目或 Sencha Touch 项目都是相同的：

让我们从构建按钮开始。这个按钮不会为我们执行生产构建。这个按钮唯一能做的就是编译并保存项目。对于 Ext JS 项目，构建必须手动完成（Sencha Architect 2.2 及更早版本不支持）。对于 Sencha Touch 项目，我们将在本章后面学习如何进行。

我们在本章中将学习的所有功能仅在项目保存时才可用。因此，请点击保存，选择您要保存项目的地方，然后享受乐趣吧！

预览项目

预览按钮将打开您的计算机的默认浏览器，并在其上渲染app.html文件，这意味着它将在浏览器上执行应用程序。因此，当我们点击它时，将显示一个弹出窗口，询问项目的根目录的URL 前缀：

由于我们的项目已经从Xampp目录中的htdocs文件夹创建，我们只需通知本地主机路径和应用程序路径。然后，应用程序将在浏览器中打开，如下面的截图所示：

每次您点击预览按钮时，都会显示相同的弹出窗口。您可以选择点击不再显示复选框，这样它就不会再次显示。

发布项目

发布按钮只是将您的代码复制到特定的目录。它不会复制 Sencha Architect 文件或源控制文件（.svn, .git 等）。

例如，假设您正在本地工作在一个项目上，但您想将应用程序发布到 Web 服务器上进行测试。您需要点击发布按钮，如果这是您第一次为特定项目点击此按钮，将显示如下截图所示的弹出窗口：

然后，点击浏览并选择要复制文件的目录。它需要与项目根文件夹不同的目录。当您点击继续时，Sencha Architect 将运行一个脚本并将所有文件复制到指定的目录，如图所示：

您可以通过点击设置按钮和项目选项卡来随时更改设置：

介绍 Sencha Cmd 和 Sencha Architect

Sencha Architect 是一个专为 Sencha 项目设计的优秀开发工具。Sencha 还有一个名为 Sencha Cmd 的其他工具，允许开发者使用命令行终端创建、构建、模拟和打包项目。Sencha Architect 允许我们原生地构建、模拟和打包 Sencha Touch 项目。因此，这两个工具之间有集成。因此，为了充分利用它们，我们需要安装 Sencha Cmd。

下载它，请访问 www.sencha.com/products/sencha-cmd/download 并根据您使用的操作系统下载适当的版本。

注意

在我们开始之前，我们还需要安装 Java JDK 并配置环境变量 (docs.oracle.com/javase/tutorial/essential/environment/paths.html)，安装 Ruby (www.ruby-lang.org)，Sass (sass-lang.com/) 以及 Compass (compass-style.org/)。您可以在 Sencha Cmd 文档中找到所有这些步骤：docs.sencha.com/touch/2.2.0/#/guide/command。

在这本书的整个过程中，我们还了解到，当我们创建一个 Sencha Touch 项目时，它会指向 Sencha 服务器上的 SDK。为了能够模拟和打包应用，我们还需要在本地安装 Sencha Touch。只需从 Sencha 网站下载 (www.sencha.com/products/touch/download/) 并解压缩到您偏好的目录即可。然后，我们就可以开始了！

模拟 Sencha Touch 应用

对于所有 Sencha Touch 项目，在保存后，您将在工具箱中看到一个名为打包的按钮，如下截图所示：

点击打包按钮是我们模拟应用之前需要采取的第一步。当我们点击它时，将显示一个屏幕，如下截图所示：

我们需要做的第一件事是下载并安装Sencha Cmd (1)。如果您已经完成了，那么您需要设置 Sencha Cmd 安装路径 (2)。下一步是点击验证按钮 (3) 来验证一切是否正常。输出应该是一个窗口，它将弹出（终端），Sencha Architect 将尝试执行 sencha 命令以确保一切正常。如果一切正常，只需点击保存 (4)。

接下来，转到使用 Cmd 设置项目垂直标签。注意，安装插件标签现在有一个绿色的子弹。我们的目标是让所有标签都有绿色的子弹。这意味着我们已经完成了设置，并且我们准备好模拟或构建原生应用了。

在这个第二个标签中，我们需要通知 Sencha Architect 关于本地安装 Sencha Touch SDK 的目录（2）。如果您还没有，请下载它并将其解压缩到您偏好的目录（1）。

我们需要特别注意的一件非常重要的事情是我们使用的 Sencha Touch 版本与 Sencha Cmd 版本的结合。对于 Sencha Touch 2.0.x，我们需要使用 Sencha SDK Tools 2.x（这是 Sencha Cmd 的一个较旧版本）。对于 Sencha Touch 2.1.x，我们需要使用 Sencha Cmd 3.0.x，而对于 Sencha Touch 2.2.x，我们需要使用 Sencha Cmd 3.1.x。为了确保我们使用的是正确的版本，请始终查看官方论坛以获取更多信息（www.sencha.com/forum/forumdisplay.php?98-Sencha-Architect-2.x-Help-amp-Discussions）。如果我们没有使用正确的版本，我们可能会得到诸如“当前工作目录不是一个已识别的 Sencha SDK 或应用程序文件夹”的错误。

最后，点击使用 Cmd 设置项目按钮（3）。将显示一个终端窗口。在这个终端中，将执行sencha generate app命令，并将项目配置（名称和路径）作为参数传递给命令（如要求）：

最后一步，我们需要点击第三个垂直标签，即打包设置（再次注意，前两个标签都有绿色的子弹，这意味着前面的步骤是正确的）。

当我们手动创建一个 Sencha Touch 应用（不使用 Sencha Architect），使用 Sencha Cmd 和sencha generate app命令时，它会创建一个名为packager.json的文件，其中包含我们需要提供给 Sencha Cmd 和 Sencha Touch 以模拟和为我们创建原生应用的所有信息。我们现在需要做同样的事情。但这个packager.json可以通过点击添加打包设置按钮自动创建。当你点击它时，结果将如以下截图所示：

我们需要注意的三件事：首先，所有来自垂直标签的子弹都是绿色的。这意味着我们现在可以开始本地模拟和打包了。其次，创建了一个打包器（当前打包设置），我们可以按照自己的意愿进行配置（模拟，为 Android 或 iOS 构建原生应用）。第三，打包器被添加为项目资源，这意味着我们也可以手动完成这项工作（就像创建任何其他资源一样）。

现在，让我们看看如何模拟 iOS 和 Android（Sencha Cmd 支持的唯一平台）。

iOS

首先，为了模拟 iOS 应用，您需要有一个 Mac OS。因此，此步骤仅适用于 Mac OS 用户，如果您使用 Windows 或 Linux 则不会生效。

其次，您还需要安装 XCode (developer.apple.com/xcode/)。它是免费的，您可以直接从 App Store 下载。

默认情况下，所有打包器配置都为 iOS 平台准备好了，所以我们只需从工具栏的 Package 按钮点击下拉箭头图标，然后选择 Simulate。同样，将打开一个终端窗口并运行 sencha app build native 命令。然后我们的应用将被模拟！

故障排除

如果您在尝试模拟 iOS 时遇到错误，请打开 iOS Simulator，转到菜单并选择 Reset Contents and Settings…，然后点击 Reset。然后，通过点击 Simulate 再次尝试模拟。

Android

要模拟 Android 应用，您只需要安装 Android SDK (developer.android.com/sdk/index.html)。但强烈建议您安装带有 ADT 插件的 Eclipse（信息见 developer.android.com/sdk/index.html）。在开始 Android 开发之前，设置和配置您所需的一切会容易得多。您可以使用任何操作系统（Mac OS、Linux 或 Windows）来模拟或打包 Android 应用。

在打包文件中，我们需要配置三件事情。第一件事是将 platform 从 iOSSimulator 更改为 AndroidEmulator。第二件事是 sdkPath；您需要告知您在机器上解压 Android SDK 的完整路径。第三件事是 androidAPILevel；只需确保您已安装相应的 API Level。

在我们再次点击 Package 中的 Simulate 按钮之前，我们需要手动启动 Android 模拟器。对于 iOS，模拟器会自动启动；对于 Android，我们需要手动启动。从 Eclipse 打开 Android Virtual Device Manager 或从命令行启动它 (developer.android.com/tools/devices/index.html)。确保您有一个 Android Virtual Device (AVD) 用于您在打包文件中设置的 API Level：

然后，在 Sencha Architect 工具栏的 Package 中点击 Simulate 按钮，稍等片刻。应用将在 AVD 上模拟，如下截图所示：

当你在 AVD 上第一次模拟应用时，可能需要一些时间，所以请稍加耐心。

打包（原生）Sencha Touch 应用

在我们完成所有测试后，是时候在真实设备上测试了！

iOS 和 Android（我们在前面的主题中已设置）的配置是相同的。现在，如果我们想在真实设备上测试，我们只需将平台（platform）更改为iOS或Android，如前一个屏幕截图所示。

iOS

在真实苹果设备上测试一个应用需要更多步骤。我们首先需要在 iOS 开发者中心创建一个配置文件。并且要有一个 iOS 开发者中心的账户(developer.apple.com/account/ios/overview.action)，你需要每年向苹果支付 99 美元。但如果你只想模拟应用，你不需要支付任何费用！

因此，第一步是创建配置文件。确保应用 ID（App ID）与打包器上设置的一致。你还需要设置捆绑种子 ID（bundleSeedId）（你还可以在你的 iOS 开发者账户中找到你的捆绑种子 ID）。你需要下载配置文件，并从打包器中将路径设置在provisionProfile配置中。证书别名（certificateAlias）、证书密码（certificatePass）和证书路径（certificatePath）不是必需的。如果你已经在 Xcode 上有了所有需要的配置，Sencha Cmd 会找到它，你不需要担心。

注意

要了解更多关于在苹果真实设备上部署应用的信息，请访问mobiforge.com/developing/story/deploying-iphone-apps-real-devices。

一切准备就绪后，只需再次点击包中的模拟按钮。当然，你的 iDevice 必须通过 USB 线连接到电脑。

Android

要在真实 Android 设备上测试一个应用，你不需要为此付费。你只需要有一个调试密钥库。如果你使用带有 ADT 插件的 Eclipse(developer.android.com/tools/sdk/eclipse-adt.html)，它将为你创建一个，如以下屏幕截图所示：

注意

如果你需要，你也可以手动创建密钥库。请参阅指南中的创建证书部分：docs.sencha.com/architect/2/#!/guide/deploy。

然后，当你的 Android 设备连接到电脑时（不要忘记在设备设置中启用开发者配置），你只需再次点击工具栏中的包|模拟按钮，等待应用安装完成。

注意

如需了解更多关于在真实 Android 设备上测试应用程序的信息，请访问 mobile.tutsplus.com/tutorials/connecting-physical-android-devices-to-your-development-machine/。

Windows Phone 8 和 Blackberry 10

不幸的是，Sencha Cmd 不支持模拟和打包应用程序到 Windows Phone 8 和 Blackberry 10，尽管 Sencha Touch 2.2 及更高版本支持 Windows Phone 8 和 Blackberry 10 主题（正如我们在上一章所学到的）。

然而，我们可以创建一个 Blackberry 10 应用程序 (developer.blackberry.com/html5/documentation/creating_a_bb10_app_2007539_11.html)，并使用 Sencha Architect 工具栏中的 发布 按钮将文件从 Sencha Architect 项目复制到 Blackberry 10 应用程序项目。Blackberry 10 SDK 可用于 Mac OS、Linux 和 Windows。

同样，对于 Windows Phone 8，只需使用 Visual Studio 2012 创建 Windows Phone 8 项目（JavaScript 项目）（有一个针对 Windows Phone 8 的 Express 版本，并且是免费的）并将 Sencha Architect 项目文件发布到 Windows Phone 8 项目的特定目录。只需记住，您需要拥有 Windows 8 Pro 版本才能开发并模拟 Windows Phone 8 应用程序。Windows Phone 8 开发和模拟在之前的 Windows 操作系统（Windows Vista、Windows 7 和 Windows XP）上不可用，同样在 Mac OS 和 Linux 上也不可用。

摘要

在本章中，我们学习了如何在 Sencha Architect 中预览和发布 Ext JS 和 Sencha Touch 应用程序。我们还学习了如何使用 Sencha Architect 与 Sencha Cmd 一起模拟和打包原生 iOS 和 Android 应用程序。最后，我们还了解了一些使用相同代码创建 Blackberry 10 和 Windows Phone 8 应用的技巧。

因此，现在是时候让创意流淌，创建令人惊叹的应用程序并将它们发布到不同平台的不同应用商店了！希望您阅读这本书时过得愉快。

开源快乐！