Sencha Cmd使用指南

查看Cmd版本

使用 sencha 命令查看当前cmd版本信息

sencha

显示如下

Sencha Cmd v6.1.2.15
Sencha Cmd provides several categories of commands and some global switches. In
most cases, the first step is to generate an application based on a Sencha SDK
such as Ext JS or Sencha Touch:

    sencha -sdk /path/to/sdk generate app MyApp /path/to/myapp

Sencha Cmd supports Ext JS 4.1.1a and higher and Sencha Touch 2.1 and higher.

To get help on commands use the help command:

    sencha help generate app

For more information on using Sencha Cmd, consult the guides found here:

http://docs.sencha.com/cmd/

使用Sencha Cmd创建Extjs 6项目

以下使用指南,从新建一个ExtjsWebapp 开始,到运行应用程序结束

创建Extjs应用程序

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

打开cmd,通过以上命令创建应用程序,-sdk 参数后面是你Extjs6的安装路径,/path/to/my-app 是生成项目的路径
通过以上命令生成的项目会有以下的目录结构.

.sencha/                                  # Sencha具体的配置文件目录 (主要配置) 
      app/                                # 应用程序相关的配置
              sencha.cfg                  # Sencha Cmd 应用程序的配置文件 
              Boot.js                     # Private, low-level dynamic loader for JS and CSS 
              Microloader.js              # 基于app.json加载app
              build-impl.xml              # 应用程序构建脚本
              *-impl.xml                  # 各个构建阶段的执行脚本
              defaults.properties         # 构建项目时的默认值和说明
              ext.properties              # Extjs的构建属性和说明 
              *.defaults.properties       # 各种环境的构建属性(列入package.defaults.properties)
              plugin.xml                  # Sencha Cmd 应用级别的插件
              codegen.json                # 在更新时合并生成代码时的记录
      workspace/                          # workspace的相关配置
              sencha.cfg                  # Sencha Cmd 工作空间的配置文件
              plugin.xml                  # Workspace-level  Sencha Cmd 工作空间级别的插件
ext/                                      # 一份Extjs Jdk的拷贝
      cmd/                                # Sencha Cmd 针对框架的内容 
              sencha.cfg                  # Sencha Cmd 框架配置文件 
      classic/                            # 与classic工具包相关的包
              classic/                    # Extjs classic 工具包
              theme-neptune/              # Neptune主题工具包
              theme-triton/               # Triton主题工具包   
      modern/                             # 与modern工具包相关的包
              modern/                     # Ext JS Modern 工具包
              theme-neptune/              # Neptune主题工具包 
              theme-triton/               # Triton主题工具包 
      packages/                           # 框架提供的包
              charts/                     # 图表 package 
              ux/                         # Extjs 命名空间ux相关的包
index.html                                # 应用程序入口
app.json                                  # Application manifest应用程序描述文件
app.js                                    # 运行应用程序的类文件继承自Application.js
app/                                      # 应用程序MVC模式的源代码 
      model/                              # model 层代码 
      store/                              # store层代码(dao层)
      view/                               # 视图层代码
              main/                       # 主页面相关视图代码
                       Main.js            # 主视图
                       MainModel.js       # 主视图的视图模型 
                       MainController.js  # 主视图的空间逻辑代码
             Application.js               # 应用程序类文件
packages/                                 # Sencha Cmd 相关的包
workspace.json                            # Workspace 描述文件
build/                                    # 构建项目的输出目录

打包Web程序

sencha app build

这个命令将打包你的html、js、主题文件代码到build文件夹
注意: 执行以上命令必须在Extjs应用程序根目录下

开发模式

Sencha Cmd 可以基于应用程序的app.json文件和源代码生成一个引导文件(bootstrap).引导程序会传递相关信息给动态类加载器(Ext.loader和Microloader),引导程序并不需要手动的去维护它.
引导程序不会受到你JavaScript源代码的影响,所以正常的工作流程,比如编辑、保存、重新加载、复制可以使引导程序像预期的那样工作.但是修改样式、移动或者重命名Js的文件将使引导信息失效另外生成CSS需要运行程序.

有两种基本的途径可以更新引导程序
sencha app watch
使应用程序在浏览器中一直保持运行状态的最简单的方式是运行 app watch:

sencha app watch

这个命令相当于执行了一个development build命令,同时也启动了Sencha Cmd内部的web server服务器
app watch会开始等待并监视文件的变化,一旦文件发生更改,Sencha cmd会重新自动进行develpment build之后继续等待.
可以通过http://localhost:1841/ 对应用程序进行访问.
可以通过Ctrl+c停止运行app watch.
通过构建开发版应用
如果手动的更新bootstrap引导文件,有以下两个命令可以使用

sencha app build development
sencha app refresh

app refresh命令只会更新bootstrap引导文件的js代码部分.当仅仅是修改了js相关文件后使用这个命令
app build development内部实际上同样执行了app refresh领命,但是同时会对css文件进行重新编译.
app.json文件包含很多配置项以及相应的说明,另外workspace.json包含了工作空间以及一些额外的配置.
classpath配置项配置了项目的源代码文件路径,sencha app build命令会通过此配置查找项目的源文件并进行编译.

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

创建工作空间

sencha generate workspace /path/to/workspace

工作空间的目录结构如下:

workspace.json            # 工作空间配置
sencha/                  
    workspace/             
        sencha.cfg        #  Sencha Cmd配置文件 
        plugin.xml        #  Sencha Cmd插件

在工作空间中创建Extjs应用程序

mkdir apps           //新建apps文件夹用来存放多个Extjs应用
cd apps              //进入apps目录
//创建第一个应用时使用此命令,Cmd会自动根据命令中指定的框架路径将
//ext框架拷贝到workspace根目录.之后创建使用下面的命令
sencha -sdk /path/to/ext6 generate app MyApp /path/to/my-app 

sencha generate app --ext NewApp newapp 

上面--ext 指的就是配置文件中指定的extjs框架路径.

本地化设置

在app.json文件中的requires中添加"locale",告诉cmd应用需要locale设置,另外指定哪一种本地化文件. 例如"zh_CN".

"requires": [
     "locale"
],
"locale": "zh_CN",