查看Cmd版本

使用 sencha 命令查看當(dāng)前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創(chuàng)建Extjs 6項(xiàng)目

以下使用指南,從新建一個(gè)ExtjsWebapp 開始,到運(yùn)行應(yīng)用程序結(jié)束

創(chuàng)建Extjs應(yīng)用程序

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

打開cmd,通過以上命令創(chuàng)建應(yīng)用程序,-sdk 參數(shù)后面是你Extjs6的安裝路徑,/path/to/my-app 是生成項(xiàng)目的路徑
通過以上命令生成的項(xiàng)目會(huì)有以下的目錄結(jié)構(gòu).

.sencha/                                  # Sencha具體的配置文件目錄 (主要配置) 
      app/                                # 應(yīng)用程序相關(guān)的配置
              sencha.cfg                  # Sencha Cmd 應(yīng)用程序的配置文件 
              Boot.js                     # Private, low-level dynamic loader for JS and CSS 
              Microloader.js              # 基于app.json加載app
              build-impl.xml              # 應(yīng)用程序構(gòu)建腳本
              *-impl.xml                  # 各個(gè)構(gòu)建階段的執(zhí)行腳本
              defaults.properties         # 構(gòu)建項(xiàng)目時(shí)的默認(rèn)值和說明
              ext.properties              # Extjs的構(gòu)建屬性和說明 
              *.defaults.properties       # 各種環(huán)境的構(gòu)建屬性(列入package.defaults.properties)
              plugin.xml                  # Sencha Cmd 應(yīng)用級(jí)別的插件
              codegen.json                # 在更新時(shí)合并生成代碼時(shí)的記錄
      workspace/                          # workspace的相關(guān)配置
              sencha.cfg                  # Sencha Cmd 工作空間的配置文件
              plugin.xml                  # Workspace-level  Sencha Cmd 工作空間級(jí)別的插件
ext/                                      # 一份Extjs Jdk的拷貝
      cmd/                                # Sencha Cmd 針對(duì)框架的內(nèi)容 
              sencha.cfg                  # Sencha Cmd 框架配置文件 
      classic/                            # 與classic工具包相關(guān)的包
              classic/                    # Extjs classic 工具包
              theme-neptune/              # Neptune主題工具包
              theme-triton/               # Triton主題工具包   
      modern/                             # 與modern工具包相關(guān)的包
              modern/                     # Ext JS Modern 工具包
              theme-neptune/              # Neptune主題工具包 
              theme-triton/               # Triton主題工具包 
      packages/                           # 框架提供的包
              charts/                     # 圖表 package 
              ux/                         # Extjs 命名空間ux相關(guān)的包
index.html                                # 應(yīng)用程序入口
app.json                                  # Application manifest應(yīng)用程序描述文件
app.js                                    # 運(yùn)行應(yīng)用程序的類文件繼承自Application.js
app/                                      # 應(yīng)用程序MVC模式的源代碼 
      model/                              # model 層代碼 
      store/                              # store層代碼(dao層)
      view/                               # 視圖層代碼
              main/                       # 主頁面相關(guān)視圖代碼
                       Main.js            # 主視圖
                       MainModel.js       # 主視圖的視圖模型 
                       MainController.js  # 主視圖的空間邏輯代碼
             Application.js               # 應(yīng)用程序類文件
packages/                                 # Sencha Cmd 相關(guān)的包
workspace.json                            # Workspace 描述文件
build/                                    # 構(gòu)建項(xiàng)目的輸出目錄

打包Web程序

sencha app build

這個(gè)命令將打包你的html、js、主題文件代碼到build文件夾
注意: 執(zhí)行以上命令必須在Extjs應(yīng)用程序根目錄下

開發(fā)模式

Sencha Cmd 可以基于應(yīng)用程序的app.json文件和源代碼生成一個(gè)引導(dǎo)文件(bootstrap).引導(dǎo)程序會(huì)傳遞相關(guān)信息給動(dòng)態(tài)類加載器(Ext.loader和Microloader),引導(dǎo)程序并不需要手動(dòng)的去維護(hù)它.
引導(dǎo)程序不會(huì)受到你JavaScript源代碼的影響,所以正常的工作流程,比如編輯、保存、重新加載、復(fù)制可以使引導(dǎo)程序像預(yù)期的那樣工作.但是修改樣式、移動(dòng)或者重命名Js的文件將使引導(dǎo)信息失效另外生成CSS需要運(yùn)行程序.

有兩種基本的途徑可以更新引導(dǎo)程序
sencha app watch
使應(yīng)用程序在瀏覽器中一直保持運(yùn)行狀態(tài)的最簡(jiǎn)單的方式是運(yùn)行 app watch:

sencha app watch

這個(gè)命令相當(dāng)于執(zhí)行了一個(gè)development build命令,同時(shí)也啟動(dòng)了Sencha Cmd內(nèi)部的web server服務(wù)器
app watch會(huì)開始等待并監(jiān)視文件的變化,一旦文件發(fā)生更改,Sencha cmd會(huì)重新自動(dòng)進(jìn)行develpment build之后繼續(xù)等待.
可以通過http://localhost:1841/ 對(duì)應(yīng)用程序進(jìn)行訪問.
可以通過Ctrl+c停止運(yùn)行app watch.
通過構(gòu)建開發(fā)版應(yīng)用
如果手動(dòng)的更新bootstrap引導(dǎo)文件,有以下兩個(gè)命令可以使用

sencha app build development
sencha app refresh

app refresh命令只會(huì)更新bootstrap引導(dǎo)文件的js代碼部分.當(dāng)僅僅是修改了js相關(guān)文件后使用這個(gè)命令
app build development內(nèi)部實(shí)際上同樣執(zhí)行了app refresh領(lǐng)命,但是同時(shí)會(huì)對(duì)css文件進(jìn)行重新編譯.
app.json文件包含很多配置項(xiàng)以及相應(yīng)的說明,另外workspace.json包含了工作空間以及一些額外的配置.
classpath配置項(xiàng)配置了項(xiàng)目的源代碼文件路徑,sencha app build命令會(huì)通過此配置查找項(xiàng)目的源文件并進(jìn)行編譯.

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

創(chuàng)建工作空間

sencha generate workspace /path/to/workspace

工作空間的目錄結(jié)構(gòu)如下:

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

在工作空間中創(chuàng)建Extjs應(yīng)用程序

mkdir apps           //新建apps文件夾用來存放多個(gè)Extjs應(yīng)用
cd apps              //進(jìn)入apps目錄
//創(chuàng)建第一個(gè)應(yīng)用時(shí)使用此命令,Cmd會(huì)自動(dòng)根據(jù)命令中指定的框架路徑將
//ext框架拷貝到workspace根目錄.之后創(chuàng)建使用下面的命令
sencha -sdk /path/to/ext6 generate app MyApp /path/to/my-app 

sencha generate app --ext NewApp newapp 

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

本地化設(shè)置

在app.json文件中的requires中添加"locale",告訴cmd應(yīng)用需要locale設(shè)置,另外指定哪一種本地化文件. 例如"zh_CN".

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