ubuntu搭建Sencha Cmd編譯ExtjS項目

• 下載JDK,並解壓,配置環境變量
  

• 下載Sencha cmd

  • 解壓zip包
  • 執行.sh腳本
  • 配置環境變量
    
• 配置java內存,因爲內存不足會出現構建時出現意料以外的問題
  

• 下載ExtJS的SDK包並解壓在某個目錄中
  執行sencha -sdk ~/extsdk/ generate app MyExtApp --ext --classic Admin admin

  • -sdk 指向extsdk目錄解壓的目錄
  • generate app 爲生成新應用
  • --ext --classic 爲只使用classic工具箱
  • Admin爲應用名
  • admin爲生成應用的目錄
• 執行sancha app build

• 修改主題
  app.json文件

  "theme": "theme-triton",
   // "theme": "theme-gray",
   // "theme": "theme-classic",

• 生成自定義主題
  sencha generate theme my-triton
  sencha generate theme my-gray
  sencha generate theme my-classic
• 命令執行後會在項目目錄下生成相應的目錄
  packages/local/my-triton
  packages/local/my-gray
  packages/local/my-classic
• 修改目錄下的package.json
  讓當前的自定義主題繼承自某個系統已有主題，如'theme-triton'

  "extend": "theme-triton"

• 同時使用多個主題及多語言
  app.json文件

"toolkit": "classic",
        // build多個主題
        "builds": {
        "triton": {
            "theme": "my-triton"
        },
        "gray": {
            "theme": "my-gray"
        },
        "classic": {
            "theme": "my-classic"
        }
        },
    
        // 須要ext-locale模塊
        "requires": [
        "font-awesome",
        "ext-locale"
        ],
        
        // 支持的語言
        "locales": [
            "en",
            "zh_CN"
        ],
        
        "bootstrap": {
            // 須要增長這一行
            "manifest": "${build.id}.json",
        
            "base": "${app.dir}",
            "microloader": "bootstrap.js",
            "css": "bootstrap.css"
        },
        
        // 輸入html模板文件
        "indexHtmlPath": "index.ejs",
        
        "output": {
            // "base": "${workspace.build.dir}/${build.environment}/${app.name}",
            // "appCache": {
            //     "enable": false
            // }
        
            // =============== 輸出設置 ==============
            "base": "${workspace.build.dir}/${build.environment}/${app.name}",
            // 輸出heml模板文件名
            "page": "index.ejs",
            "manifest": "${build.id}.json",
            "js": "${build.id}/app.js",
            "framework": "${build.id}/framework.js",
            "resources": {
                "path": "./${build.id}/resources",
                "images": "./${build.id}/resources/images",
                "shared": "./resources",
                "toolkit": "${toolkit.name}/resources",
                "base": "."
            },
            "deltas": {
                "enable": false
            },
            "appCache": {
                "enable": false
            }        
        }

• build後會根據主題及語言的組合產生多個<theme>-<locale>.json, <theme>-<locale>.jsonp文件
  -rw-rw-r-- 1 xjp xjp 63406 Jul 3 10:54 classic-en.json
  -rw-rw-r-- 1 xjp xjp 63436 Jul 3 10:54 classic-en.jsonp
  -rw-rw-r-- 1 xjp xjp 63607 Jul 3 10:45 classic.json
  -rw-rw-r-- 1 xjp xjp 63637 Jul 3 10:45 classic.jsonp
  -rw-rw-r-- 1 xjp xjp 59719 Jul 3 10:54 classic-zh_CN.json
  -rw-rw-r-- 1 xjp xjp 59749 Jul 3 10:54 classic-zh_CN.jsonp
  -rw-rw-r-- 1 xjp xjp 63739 Jul 3 10:54 gray-en.json
  -rw-rw-r-- 1 xjp xjp 63769 Jul 3 10:54 gray-en.jsonp
  -rw-rw-r-- 1 xjp xjp 60022 Jul 3 10:45 gray.json
  -rw-rw-r-- 1 xjp xjp 60052 Jul 3 10:45 gray.jsonp
  -rw-rw-r-- 1 xjp xjp 60052 Jul 3 10:54 gray-zh_CN.json
  -rw-rw-r-- 1 xjp xjp 60082 Jul 3 10:54 gray-zh_CN.jsonp
  -rw-rw-r-- 1 xjp xjp 67343 Jul 3 10:53 triton-en.json
  -rw-rw-r-- 1 xjp xjp 67373 Jul 3 10:53 triton-en.jsonp
  -rw-rw-r-- 1 xjp xjp 59684 Jul 3 10:46 triton.json
  -rw-rw-r-- 1 xjp xjp 59714 Jul 3 10:46 triton.jsonp
  -rw-rw-r-- 1 xjp xjp 63632 Jul 3 10:54 triton-zh_CN.json
  -rw-rw-r-- 1 xjp xjp 63662 Jul 3 10:54 triton-zh_CN.jsonp
• 若是使用動態主題和語言切換，不能使用appCache功能
  app.json文件

"production": {
            "output": {
                "appCache": {
                    "enable": false
                }
             }
         }

• 動態切換主題和語言環境
  在index.html文件中控制

<script type="text/javascript">
                var Ext = Ext || {}; // Ext namespace won't be defined yet...
        
                Ext.beforeLoad = function (tags) {
                     // 經過主題和語言的選擇指定相應的profile文件
                    Ext.manifest = 'triton-zh_CN'; // this name must match a build profile name
                };
            </script>