本文地址： http://blog.csdn.net/sushengmiyan/article/details/38313537
本文作者：sushengmiyan
-------------------------------------------------------------資源連結-----------------------------------------------------------------------
翻譯來源  Sencha Cmd官方網站： http://www.sencha.com/products/extjs/up-and-running/cmd-getting-started
------------------------------------------------------------------------------------------------------------------------------------------------

帶著Ext JS 5來使用sencha cmd

-------------------------------------------------------------------
  這個指導通過處理使用 sencha cmd的sencha generate app命令來建立應用程式，本文是以允許一個應用程式來結束的
  處理更新一個存在的應用程式來體驗Sencha cmd是在本章結束的時候介紹的，首先理解什麼是"ideal"和“default”是很重要的，在預設的結構和已經存在的應用程式中驅動更新是有很大區別的。
  

學習基礎：

------------------

    如果想閱讀以下內容，那麼你需要先了解上節內容：http://blog.csdn.net/sushengmiyan/article/details/38295575

一鍵生成你的應用程式程式碼：

------------------------------------------------------------

  我們的出發點就是使用命令來產生一個應用程式，執行以下命令：
  sencha generate app -ext MyApp E:\senchaworkspace\MyApp

可以看到如下執行結果

以上命令會從官網下載試用版本的ext程式碼到你本地，如果你已經購買正版程式碼，那麼需要使用下一節（-sdk命令來生成你的應用程式）在你的硬碟資料夾下可以看到：

這表明自動生成了你的程式框架。

需要注意的是，生成的EXTjs 是商業體驗版本，如果你購買了，那麼你需要下載ext js的zip包，並且使用-SDK命令來制定SDK的路徑，這樣，就不會去預設下載SDK而是按照你本地的檔案來生成了。

命令如下： sencha -sdk /這裡是你的sdk路徑/ generate app MyApp 你的App的路徑。如 sencha -sdk c:sencha5.0.0 generate app OASystem d:\oasys

執行完成之後可以看到如下的資料夾路徑：

.sencha/                        # Sencha-specific files (for example, configuration)
    app/                        # Application-specific content
        Boot.js                 # Private, low-level dynamic loader for JS and CSS
        Microloader.js          # Loads app based on app.json content
        sencha.cfg              # Application configuration file for Sencha Cmd
        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 property values by env (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/                            # A copy of the Ext JS SDK
    cmd/                        # Framework-specific content for Sencha Cmd
        sencha.cfg              # Framework configuration file for Sencha Cmd
    packages/                   # Framework supplied packages
        ext-theme-classic/      # Ext JS Theme Package for Classic
        ext-theme-neptune/      # Ext JS Theme Package for Neptune
        ...                     # Other theme and locale packages
    src/                        # The Ext JS source
    ...

index.html                      # The entry point to your application
app.json                        # Application manifest
app.js                          # Launches the Application class
app/                            # Your application's source code in MVC structure
    model/                      # Folder for application model classes
    store/                      # Folder for application stores
    view/                       # Folder for application view classes
        main/                   # Folder for the classes implementing 
            Main.js             # The Main View
            MainModel.js        # The `Ext.app.ViewModel` for the Main View
            MainController.js   # The `Ext.app.ViewController` for the Main View
    Application.js              # The `Ext.app.Application` class

packages/                       # Sencha Cmd packages

build/                          # The folder where build output is placed

這個路徑和上方資料夾截圖是沒有區別的都是一樣的。

構造你的應用程式：

----------------------------------------

只需要執行以下命令就可以構造你的應用程式打包了

sencha app build,這個命令需要你在你的應用程式資料夾下執行哦。可以看到我的執行過程如下：

需要注意不能使用-sdk命令了，使用會出現問題哦

執行完成之後可以看到增加了build目錄，下方就是包含了js程式碼 sass還有主題的資料夾。

Sencha 的網路服務容器：

----------------------------------------------------

使用 sencha web start命令來開啟你的服務。服務允許你將本地應用程式當做網路服務。

這個命令將1841埠制定為當前的訪問埠，如果想停止服務就執行如下命令： sencha web stop或者ctrl+c來結束服務

想訪問你的服務，只需要在瀏覽器中執行如下路徑：

http://localhost:1841 

當我們訪問的時候，可以看到預設生成的網頁如下：

如果你不想使用1841埠，你可以在執行的時候制定埠號碼：sencha -port 8080 web start

擴充套件你的應用程式

使用 sencha generate 命令幫你你快速的建立一個mvc的元件包像controllers和models 

執行以下命令sencha help generate你可以看到有如下的擴充套件資訊：

重要：為了執行命令，你需要在當前應用程式的路徑下執行才可以。

增加一個新的models

--------------------------------------------

使用sencha generate model 命令就可以。

如圖 

這樣就建立了一個User的Model包含三個屬性

增加一個新的Controllers

-----------------------------------------------------

類似上述命令，執行 sencha generate controller Central

增加一個view

------------------------------

也是一樣執行 sencha generate view SomeView

客戶化定製構造程式

-----------------------------------------

現在又多種多樣的配置選項可以使用在 ”.sencha/app/sencha.cfg“資料夾下，在只有一張頁面的情況下，可以忽略”.sencha/workspace“配置資料夾

classpath類路徑

----------------------------------

sencha app build 命令制定去哪裡找到你的應用程式的程式碼全部依賴於app.classpath配置，它是在”.sencha/app/sencha.cfg“資料夾下的。預設的數值是

app.classpath=${app.dir}/app,${app.dir}/app.js

更高層次的閱讀：

-----------------------------------

想了解更多的關於sencha cmd的命令處理，你額可以參考 Inside the app build process

更新你的應用程式

使用 sencha app upgrade[新的路徑]

對於已經存在的應用程式來說，可能預設的不是index.html這時候需要你在app.json中制定：

{
    ...

    "indexHtmlPath": "index.php"
}