expand

内容导航前提创建你的应用程序构建(Build) 你的应用程序开发模式 sencha app watch 构建开发版本(Development Builds) 和刷新扩展你的应用程序创建 Models 创建 Views 创建 Controllers 自定义 Build 深入学习 The classpath 进一步阅读升级你的应用程序移植应用程序到 Sencha Cmd 配置替代方案下一步

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 特定文件 (主要配置)
    app/                        # Application 特定内容
        sencha.cfg              # 用于 Sencha Cmd 的 应用程序配置文件
        Boot.js                 # 私有, 底层的动态 JS 和 CSS 加载器
        Microloader.js          # 根据 app.json 的内容加载应用程序
        build-impl.xml          # 标准的应用程序构建(build) 脚本
        *-impl.xml              # 不同构建(build)阶段的脚本实现
        defaults.properties     # 构建(build)相关的属性的默认值和文档说明
        ext.properties          # 特定于Ext JS 的，构建(build)相关的属性值 
        *.defaults.properties   # 特定于不同环境的构建(build)相关的属性 (比如 "testing")
        plugin.xml              # 用于 Sencha Cmd 的 应用程序级别的 plugin
        codegen.json            # 用于在升级时合并生成的代码的数据
    workspace/                  # Workspace 特定内容 (看下面)
        sencha.cfg              # 用于 Sencha Cmd 的 Workspace 配置文件
        plugin.xml              # 用于 Sencha Cmd 的 Workspace 级别的 plugin

ext/                            # Ext JS SDK 的副本
    cmd/                        # 用于 Sencha Cmd 的 框架的特定内容
        sencha.cfg              # 用于 Sencha Cmd 的 框架配置文件
    classic/                    # Classic Toolkit 相关的包
        classic/                # Ext JS Classic Toolkit 包
        theme-neptune/          # Classic Toolkit 主题包 Neptune
        theme-triton/           # Classic Toolkit 主题包 Triton
        ...
    modern/                     # Modern Toolkit 相关的包
        modern/                 # Ext JS Modern Toolkit 包
        theme-neptune/          # Modern Toolkit 主题包 for Neptune
        theme-triton/           # Modern Toolkit 主题包 for Triton
        ...
    packages/                   # 框架提供的包
        charts/                 # 图表包
        ux/                     # "Ext.ux" 命名空间的内容
    ...

index.html                      # 你的应用程序的入口
app.json                        # 应用程序清单文件
app.js                          # 应用程序启动的类
app/                            # 应用程序 MVC 结构源码
    model/                      # model 类存放目录
    store/                      # stores 类存放目录
    view/                       # view 类存放目录
        main/                   # Main 视图类的存放目录
            Main.js             # Main 视图类
            MainModel.js        # Main 视图的 `Ext.app.ViewModel`
            MainController.js   # Main 视图的 `Ext.app.ViewController`
    Application.js              #  `Ext.app.Application` 类

packages/                       # Sencha Cmd 包
workspace.json                  # Workspace JSON 描述文件

build/                          # build 输出目录

单页应用程序的内容和 workspace 没有区别. 更多关于 Workspaces 的内容, 请看 Sencha Cmd 的 Workspace.

构建(Build) 你的应用程序

构建(build)你的应用程序只需要执行下面的命令:

sencha app build

这个命令构建(build) HTML文件, JavaScript 代码和主题，输出到 "build" 文件夹下.

重要. 执行这个命令，必须把当前目录设为应用程序的顶层目录(此处则是 "/path/to/my-app").

重要不要在sencha app命令中指定 -sdk 参数. 因为这些命令需要运行在当前应用程序的根目录下, Sencha Cmd 知道用哪个 SDK. 如果加上了 -sdk参数，会导致 Sencha Cmd 以为你的当前目录需要指定 SDK, 也就是说当前目录不是一个正确的应用程序目录.

开发模式

Sencha Cmd 根据"app.json"文件和应用程序源码，生成了一个名为 “引导(bootstrap)”的东西. 引导(bootstrap) 把这些信息传给动态类加载器 (Ext.Loader 和 Microloader)，所以你不需要手动维护.

改变 JavaScript 代码并不会影响到引导(bootstrap), 所以“编辑, 保存, 重新加载, 重复”这些通常的流程还是正常操作. 有时候，对于样式的改动或者重命名了 JavaScript 代码可能导致 bootstrap 的信息失效，或者 CSS 失效.

有2种基本的方法来更新引导(bootstrap).

sencha app watch

要使应用程序一直保持可运行，最简单的办法就是执行 app watch:

sencha app watch

这个命令会首先执行一次“开发构建(development build)” (见下面) , app watch 等待并监控所有文件的更改.

Watch 命令也会启动一个内置的 Sencha Cmd web 服务器, 管理 workspace 下的文件. 这个 web 服务器默认端口是 1841.

要访问这个 Sencha Cmd web 服务器, 可以打开:

http://localhost:1841/

Watch 命令可以用 Ctrl+C 终止.

使用 app watch, 同时也会启用 Fashion，并在样式发生变更的时候保持 CSS 的实时更新.

构建开发版本(Development Builds) 和刷新

如果你要手动更新 bootstrap 和 CSS, 需要执行2个命令:

sencha app build development
sencha app refresh

app refresh 命令只更新 bootstrap 的 JavaScript 部分. 如果重命名了类，移动了类文件的位置或者其它行为等, 这个命令更新速度最快, 也只需要执行这个命令就足够了.

app build development 命令会执行一次 refresh，也会编译你的样式为新的 CSS 文件.

扩展你的应用程序

sencha generate 命令可以帮助你快速创建 MVC 架构中的组件，比如 controllers 或 models:

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 - 创建一个 应用程序
  * controller - 在当前应用程序下创建一个 Controller
  * form - 在当前应用程序下创建一个 Form (只用于Sencha Touch)
  * model - 在当前应用程序下创建一个 Model 
  * package - 创建一个 包
  * profile - 在当前应用程序下创建一个 Profile (只用于Sencha Touch)
  * theme - 创建一个主题页面，用于图像切片(slice)操作 (只用于 Ext JS)
  * view - 在当前应用程序下创建一个 view (只用于 Ext JS)
  * workspace - 初始化一个多 app 的 workspace

重要. 为了执行下面的命令, 命令行当前目录必须是应用程序根目录 (此处则是“/path/to/MyApp”).

创建 Models

添加一个 model 到你的应用程序，只需要在 "/path/to/MyApp"下运行 Sencha Cmd 命令，像这样:

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

此命令添加了一个名为User的 model 类，带有3个字段.

注意. 这是唯一一个可以与 Sencha Architect 项目兼容的generate 命令. 在 Sencha Architect 中, 通常这个命令的用法是做成自动化或脚本的形式来创建 models.

创建 Views

为你的应用程序添加一个 view，也是类似的:

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

上述命令会创建下面的文件:

app/
    view/
        foo/                    # 视图类的存放目录
            Thing.js            # 视图类
            ThingModel.js       # 视图类的 `Ext.app.ViewModel`
            ThingController.js  # 视图类的 `Ext.app.ViewController`

除了 view 的类名，不需要其它参数. 不过，你也可以指定基类:

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

这个命令会把 view 类的 extend 设为 Ext.tab.Panel.

注意. 这个命令不兼容 Sencha Architect 项目.

创建 Controllers

在 Ext JS 5+, Sencha Cmd 创建的每一个 view 默认都有Ext.app.ViewController, 所以大部分情况下不需要创建继承自Ext.app.Controller的全局 controllers. 如果你需要一个新的 controller, 你可以类似地创建:

cd /path/to/MyApp
sencha generate controller Central

除了 controller 的类名，不需要其它参数.

注意. 这个命令不兼容 Sencha Architect 项目.

自定义 Build

如果你要自定义 build，首先要看的地方应该是 "app.json". 这个文件包含了很多选项和相关记录. 此外还有"workspace.json"文件，其中包含额外的设置.

深入学习

不推荐修改除 ".json" 以外的文件，不过某些情况下确是必须的. 如果你要修改应用程序或者 workspace 的 ".sencha" 目录下的文件, 结果可能是你改的是一个不支持的配置. 以前的版本中, 偶尔地会修改 ".sencha/app/*.properties" 下的文件, ".sencha/app/sencha.cfg" 下的文件，以及 ".sencha/workspace/sencha.cfg"下的文件. 从 Sencha Cmd 6 开始, 应该避免这样做.

如果某个问题不能通过修改 JSON 描述文件搞定，Sencha Support 可能会改进的. 如果有什么任务不能通过 JSON 文件实现, 请到论坛或 Support Portal 发起一个功能请求.

The classpath

sencha app build 命令知道去哪里找应用程序的源码，是因为"app.json"里的classpath 属性. 它的默认值是:

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

可以向这个数组中添加其它目录，以通知编译器去这些目录下寻找应用程序需要的源码.

进一步阅读

想了解更多关于 Sencha Cmd 的 build 过程, 请看应用程序 build 过程内部机制.

升级你的应用程序

应用程序包括两种和 Sencha Cmd 相关的基本内容: 构建(build)脚本(scripts) (或支持文件) 和 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

前面三项可以直接从某个 Sencha Cmd 生成的应用程序中复制到临时文件夹下. 现有的应用程序通常会有自己的入口页面, 如果不是 "index.html", 你应该在 "app.json"中添加下面的内容:

{
    ...

    "indexHtmlPath": "index.php"
}

indexHtmlPath 的值应该是你应用程序里页面的文件名. 不过，为了让构建(build)脚本(scripts)能够理解你的页面文件, 这个文件里应该含有和"index.html"相同的一些模板代码:

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

开发模式下, 这段代码加载一个文件，此文件是 Sencha Cmd 通过 sencha app build或 sencha app refresh 自动生成的. sencha app build 命令时一个完整的 build，其中已经包含了“refresh” 这一步操作.

配置

现有应用程序中可能有一些与 Sencha Cmd 生成的应用程序目录结构不一致的地方. 关于这一点, 可以考虑2种方法:

重构现有应用程序目录结构，以符合 Sencha Cmd 生成的应用程序的目录结构
配置 build 过程，以匹配现有应用程序的结构

关于配置 build 过程的详细内容, 请看应用程序 build 过程内部机制.

替代方案

如果现有应用程序不能做到和 build script 匹配(重构应用程序结构或配置 build 过程), Sencha Cmd 仍然有一些低级命令可供使用.

低级命令相关内容, 请看

下一步

Last updated

April 1, 2016

Cmd 向导 ▼