使用sencha cmd操作ExtJS 6

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

准备

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

创建应用程序

sencha cmd创建ExtJS的程序框架

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

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

//方法二：创建ExtJS 6 项目//进入sdk目录cd /path/to/ext6sencha 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 Cmdext/                            # 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 manifestapp.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` classpackages/                       # Sencha Cmd packagesworkspace.json                  # 工作空间描述build/                          # 构建输出的目录

构建程序

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

cd path/to/my-appsencha app build

发布程序

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

cd path/to/my-appsencha app watch

Ctrl + C即可关闭服务

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

refresh

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

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

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

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

cd /path/to/my-appsencha app refresh

生成代码

生成模型

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

生成视图

//生成cd /path/to/MyAppsencha generate view foo.Thing

上面指令将生成如下文件

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

你还可以为视图指定父类

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

生成controller

cd /path/to/MyAppsencha generate controller Central

查看帮助

sencha helpsencha help generatesencha help refreshsencha help app