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>