ubuntu搭建Sencha Cmd编译ExtjS项目

前端之家收集整理的这篇文章主要介绍了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>
原文链接:https://www.f2er.com/ubuntu/349533.html

猜你在找的Ubuntu相关文章