将 Sencha Cmd 与 Ext JS 6 结合使用

本指南逐步介绍了将 Sencha Cmd 与 Ext JS 6 应用程序结合使用的过程，从 sencha generate app 命令开始，到运行应用程序结束。

本指南末尾介绍了将现有（非 Sencha Cmd）应用程序升级为符合 Sencha Cmd 期望的过程。重要的是首先了解“理想”或“默认”结构作为比较点。这种默认结构与现有应用程序的结构之间的差异是推动现有应用程序升级过程的原因。

先决条件

建议在继续阅读之前阅读以下指南

• Sencha Cmd 简介

生成您的应用程序

我们的起点是生成应用程序骨架。这可以使用以下命令完成

sencha -sdk /path/to/ext6 generate app MyApp /path/to/my-app

要使用试用版，您可以同时使用此命令自动下载它

sencha generate app -ext MyApp /path/to/my-app

如果您购买了商业版，则需要下载 Ext JS ZIP 存档并使用显示的第一个命令。

上述命令生成的应用程序文件将具有以下结构

.sencha/                        # Sencha-specific files (primarily configuration)
    app/                        # Application-specific content
        sencha.cfg              # Application configuration file for Sencha Cmd
        Boot.js                 # Private, low-level dynamic loader for JS and CSS
        Microloader.js          # Loads app based on app.json content
        build-impl.xml          # Standard application build script
        *-impl.xml              # Implementations of various build phases
        defaults.properties     # Default values and docs for build properties
        ext.properties          # Build property values specific to Ext JS
        *.defaults.properties   # Build properties by environment (e.g. "testing")
        plugin.xml              # Application-level plugin for Sencha Cmd
        codegen.json            # Data for merging generated code during upgrade
    workspace/                  # Workspace-specific content (see below)
        sencha.cfg              # Workspace configuration file for Sencha Cmd
        plugin.xml              # Workspace-level plugin for Sencha Cmd

ext/                            # A copy of the Ext JS SDK
    cmd/                        # Framework-specific content for Sencha Cmd
        sencha.cfg              # Framework configuration file for Sencha Cmd
    classic/                    # Packages related to the Classic Toolkit
        classic/                # Ext JS Classic Toolkit package
        theme-neptune/          # Classic Toolkit Theme Package for Neptune
        theme-triton/           # Classic Toolkit Theme Package for Triton
        ...
    modern/                     # Packages related to the Modern Toolkit
        modern/                 # Ext JS Modern Toolkit package
        theme-neptune/          # Modern Toolkit Theme Package for Neptune
        theme-triton/           # Modern Toolkit Theme Package for Triton
        ...
    packages/                   # Framework supplied packages
        charts/                 # Charts package
        ux/                     # Contents of "Ext.ux" namespace
    ...

index.html                      # The entry point to your application
app.json                        # Application manifest
app.js                          # Launches the Application class
app/                            # Your application's source code in MVC structure
    model/                      # Folder for application model classes
    store/                      # Folder for application stores
    view/                       # Folder for application view classes
        main/                   # Folder for the classes implementing the Main View
            Main.js             # The Main View
            MainModel.js        # The `Ext.app.ViewModel` for the Main View
            MainController.js   # The `Ext.app.ViewController` for the Main View
    Application.js              # The `Ext.app.Application` class

packages/                       # Sencha Cmd packages
workspace.json                  # Workspace JSON descriptor

build/                          # The folder where build output is placed

在单页应用程序中，工作区和应用程序内容之间没有区别。要了解有关工作区的更多信息，请参阅 Sencha Cmd 中的工作区。

注意： 以上说明将生成通用应用程序。这意味着 classic 和 modern 工具包都有单独的“view”文件夹，并具有中央共享核心。要创建单工具包应用程序，只需将工具包名称附加到 generate 命令即可。

仅限 Classic

sencha -sdk /path/to/ext generate app classic MyApp /path/to/MyApp

仅限 Modern

sencha -sdk /path/to/ext generate app modern MyApp /path/to/MyApp

构建您的应用程序

构建应用程序所需的全部操作是运行以下命令

sencha app build

此命令将您的标记页面、JavaScript 代码和主题构建到 "build" 文件夹中。

重要提示。 为了执行此命令，当前目录必须是应用程序的顶层文件夹（在本例中为 "/path/to/my-app"）。

重要提示 对于 sencha app 命令，请勿指定 -sdk 参数。由于这些命令必须从应用程序的根文件夹运行，因此 Sencha Cmd 知道要使用哪个 SDK。在这些命令上使用 -sdk 会导致 Sencha Cmd 认为您的当前目录是指定的 SDK，这不是应用程序的正确当前目录。

开发模式

Sencha Cmd 根据您的 "app.json" 文件和应用程序中的源代码生成所谓的“引导程序”。引导程序将此信息传递给动态类加载器（Ext.Loader 和 Microloader），因此您不必手动维护此信息。

引导程序不受 JavaScript 源代码更改的影响，因此“编辑、保存、重新加载、重复”的正常工作流程按预期工作。偶尔，样式更改或 JavaScript 代码的移动和重命名会使此引导程序信息或运行应用程序所需的生成的 CSS 无效。

有两种更新引导程序的基本方法。

sencha app watch

使您的应用程序在浏览器中可运行的最简单方法是运行 app watch

sencha app watch

此命令将首先执行“开发构建”（见下文），但 app watch 不会返回到命令提示符，而是等待并监视对其刚刚构建的任何文件的更改。

Watch 还启动内部 Sencha Cmd Web 服务器，以通过“http:”从您的工作区提供文件。此 Web 服务器使用默认端口 1841。

要访问 Sencha Cmd Web 服务器，请使用

https://127.0.0.1:1841/

Watch 运行直到使用 Ctrl+C 停止。

使用 app watch，您还可以启用 Fashion 并使用 Live Update 使您的 CSS 在更改时保持最新。

开发构建和刷新

如果您想手动更新引导程序和 CSS，可以使用两个命令

sencha app build development
sencha app refresh

app refresh 命令仅更新引导程序的 JavaScript 部分。这是运行速度最快的更新，并且是由于重命名或其他代码移动而更改类位置时所需要的全部操作。

app build development 命令将执行 refresh，但也会编译您的样式以生成新的 CSS 文件。

扩展您的应用程序

sencha generate 命令可帮助您快速生成常见的 MVC 组件，例如控制器或模型

sencha help generate

您应该看到这个

Sencha Cmd vX.Y.Z.nnn
sencha generate

This category contains code generators used to generate applications as well
as add new classes to the application.

Commands
  * app - Generates a starter application
  * controller - Generates a Controller for the current application
  * form - Generates a Form for the current application (Sencha Touch Specific)
  * model - Generates a Model for the current application
  * package - Generates a starter package
  * profile - Generates a Profile for the current application (Sencha Touch Specific)
  * theme - Generates a theme page for slice operations (Ext JS Specific)
  * view - Generates a View for the current application (Ext JS Specific)
  * workspace - Initializes a multi-app workspace

重要提示。 为了执行下面讨论的命令，控制台上的当前目录必须在您的应用程序内部（在本例中为“/path/to/MyApp”）。

生成模型

将模型添加到您的应用程序是通过将 "/path/to/MyApp" 作为您的当前目录并运行 Sencha Cmd 来完成的，如下所示

cd /path/to/MyApp
sencha generate model User id:int,name,email

此命令添加一个名为 User 的模型类，其中包含给定的 3 个字段。

注意。 这是唯一与 Sencha Architect 项目兼容的 generate 命令。此命令的典型用途是自动化或脚本化 Sencha Architect 中数据模型的创建。

生成视图

向您的应用程序添加视图是类似的

cd /path/to/MyApp
sencha generate view foo.Thing

以上将生成以下文件

app/
    view/
        foo/                    # Folder for the classes implementing the new view
            Thing.js            # The new view
            ThingModel.js       # The `Ext.app.ViewModel` for the new view
            ThingController.js  # The `Ext.app.ViewController` for the new view

在这种情况下，除了视图名称之外，没有必需的参数。但是，您可以根据需要添加基类

cd /path/to/MyApp
sencha generate view -base Ext.tab.Panel foo.Thing

这将更改视图类使用的 extend 以使用 Ext.tab.Panel。

注意。 此命令不 与 Sencha Architect 项目兼容。

生成控制器

在 Ext JS 5+ 中，Sencha Cmd 生成的每个视图都有一个默认的 Ext.app.ViewController，因此在大多数情况下，不需要基于 Ext.app.Controller 生成全局控制器。如果您需要新的控制器，您可以像模型和视图一样以相同的方式生成一个控制器

cd /path/to/MyApp
sencha generate controller Central

在这种情况下，除了控制器名称之外，没有其他参数。

注意。 此命令不 与 Sencha Architect 项目兼容。

自定义构建

当您需要自定义构建时，首先要查看的是 "app.json"。此文件包含许多选项和相关文档。还有一个包含其他设置的 "workspace.json" 文件。

深入了解

不建议超出 ".json" 文件范围，但在某些情况下可能是必需的。如果您需要修改应用程序或工作区的 ".sencha" 文件夹中的文件，您最终可能会得到不受支持的配置。在以前的版本中，".sencha/app/*.properties" 文件、".sencha/app/sencha.cfg" 文件和 ".sencha/workspace/sencha.cfg" 文件偶尔会被修改。使用 Sencha Cmd 6，应避免这种做法。

如果仅通过修改 JSON 描述符无法重现问题，Sencha 支持可能会选择关闭工单。如果 JSON 文件中存在您无法完成的任务，请在我们的 论坛 或 支持门户 中提交功能请求。

类路径

sencha app build 命令知道在哪里查找应用程序的源代码，这归功于存储在 "app.json" 中的 classpath 属性。默认情况下，此值为

"classpath": [
    "app",
    "${toolkit.name}/src"
],

将目录添加到此数组会通知编译器在哪里查找构建应用程序所需的源代码。

进一步阅读

要了解有关 Sencha Cmd 提供的构建过程的更多信息，请参阅 应用程序构建过程内幕。

升级您的应用程序

生成的应用程序包括两种与 Sencha Cmd 相关的主要内容：构建脚本（或脚手架）和使用的 Sencha SDK 的重要内容。因此，您偶尔需要升级这些部分。您可以使用以下命令执行此操作

sencha app upgrade [ path-to-new-framework ]

“path-to-new-framework”是可选的，用于升级 Sencha Cmd 脚手架和应用程序使用的框架。

有关更多详细信息，请参阅 了解应用程序升级。

将应用程序移植到 Sencha Cmd

Sencha Cmd 生成的脚手架的关键部分是这些

.sencha/
app.json
build.xml
index.html

前三项可以简单地从生成到临时文件夹的应用程序中复制。现有应用程序通常会有一个标记入口页面，如果不是 "index.html"，您可以将以下内容添加到您的 "app.json"

{
    ...

    "indexHtmlPath": "index.php"
}

当然，该值应该是应用程序的正确值。但是，为了使生成的构建脚本能够理解此标记文件，该文件应包含在生成的 "index.html" 中找到的标准样板

<script id="microloader" type="text/javascript" src="bootstrap.js"></script>

在开发模式下，这将加载一个由 Sencha Cmd 在 sencha app build 或 sencha app refresh 期间生成的文件。sencha app build 命令是一个完整的构建，其中包括作为一步的“refresh”操作。

配置

现有应用程序的几个部分可能与 Sencha Cmd 应用程序的默认结构不匹配。此时，有两种路径需要考虑

• 重构应用程序以符合生成的结构
• 配置构建过程以匹配应用程序结构

有关如何配置构建过程的详细信息，请查阅 应用程序构建过程内幕。

替代方案

如果无法使现有应用程序符合构建脚本的期望（无论是通过重构应用程序还是配置构建），Sencha Cmd 仍然具有可通过低级命令访问的有用功能。

有关更低级别的详细信息，请参阅

• Sencha Compiler 参考
• Ant 集成

下一步

• Sencha Cmd 中的工作区
• 应用程序构建过程内幕