使用sencha cmd操作ExtJS 6

Using Sencha Cmd with Ext JS 6（原文）
sencha cmd是用来创建，构建ExtJS 程序的工具。

准备

您需要安装好sencha cmd命令行工具。

创建应用程序

sencha cmd创建ExtJS的程序框架

//方法一：创建ExtJS 6 项目
// 打开命令行窗口，window上即cmd.exe
sencha -sdk /path/to/ext6 generate app MyApp /path/to/my-app

如果没有指定sdk，则需要进入sdk目录后才能创建成功

//方法二：创建ExtJS 6 项目
//进入sdk目录
cd /path/to/ext6
sencha generate app MyApp /path/to/my-app

创建的应用程序目录文件如下

.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/                            # 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                      # 应用程序入口
app.json                        # Application manifest
app.js                          # Application入口类
app/                            # MVC模式的应用程序代码，你的代码大多写在这个目录下
    model/                      # 模型
    store/                      # store
    view/                       # 视图
        main/                   # Folder for the classes implementing the Main View
            Main.js             # The Main View
            MainModel.js        # The `Ext.app.ViewModel` 
            MainController.js   # The `Ext.app.ViewController` 
    Application.js              # The `Ext.app.Application` class

packages/                       # Sencha Cmd packages
workspace.json                  # 工作空间描述

build/                          # 构建输出的目录

构建程序

使用generate指令创建的应用程序大小达到100多M，构建指令会将页面，JS代码，主题构建到build目录下，移除sdk中不必要的文件并进行整合，让最终的包达到5~6M左右。

cd path/to/my-app
sencha app build

发布程序

使用如下指令，即可发布ExtJS 6程序，并在浏览器上查看

cd path/to/my-app
sencha app watch

Ctrl + C即可关闭服务

在浏览器中输入http://localhost:1841/，即可查看

refresh

当修改了样式，主题，本地化配置后，你需要通过refresh来更新程序。

例如修改本地化配置，打开app.json,
在requires处，将本地化配置改为中文

"requires":{
    "font-awesome",
    "ext-locale" //新添加
}，
"locale":“zh_CN” //新添加

使用如下指令，才能完成应用程序国际化配置的更新

cd /path/to/my-app
sencha app refresh

生成代码

生成模型

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

//结果是在 app/model目录下产生了User.js,其中定义了User模型类，包含三个属性：id,name,email

生成视图

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

上面指令将生成如下文件

app/
    view/
        foo/                 #
            Thing.js         # View
            ThingModel.js    # Ext.app.ViewModel
            ThingController.js    #Ext.app.ViewController

你还可以为视图指定父类

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

生成controller

cd /path/to/MyApp
sencha generate controller Central

查看帮助

sencha help
sencha help generate
sencha help refresh
sencha help app