在 Ext JS 6 中使用 Sencha Cmd

本指南将逐步介绍如何使用 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 中的工作区。

构建您的应用程序

构建应用程序所需做的就是运行以下命令

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 服务器，请使用

http://localhost: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` 命令是一个完整的构建，其中包含“刷新”操作作为其中一步。

配置

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

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

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

替代方案

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

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

• Sencha 编译器参考
• Ant 集成

下一步

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