【翻译】Ext JS 5：为不一样设备设置不一样的主题

时间 2019-12-09 标签翻译 ext 不一样设备设置主题

原文：Sencha Ext JS 5: Supporting Different Themes for Different Devicesjavascript

Sencha Ext JS 5是第一个彻底支持iOS平板的Ext框架。css

为应用程序添加平板支持，并能根据使用的设备自动切换桌面或基于触碰的主题（CSS文件）多是至关重要的任务。html

本教程将演示如何将该功能添加到应用程序。java

步骤1：建立一个应用程序

在Ext JS 5文件夹打开命令行提示符
运行如下命令：
sencha generate app TestApp ../TestApp

步骤2：定义主题

在命令行提示符切换到TestApp目录
运行如下命令
1. sencha generate theme TestApp-Desktop（注：为桌面建立主题）
2. sencha generate theme TestApp-Tablet（注：为平板建立主题）
在编辑器打开 /TestApp/packages/TestApp-Desktop/package.json
修改“extend”属性为“extend ext-theme-neptune”
保存文件
在编辑器打开/TestApp/packages/TestApp-Tablet/package.json
将“extend”属性从ext-theme-classic修改ext-theme-neptune-touch

步骤3：编辑App.json文件以便支持多平台生成

在编辑器打开 /TestApp/app.json
添加“builds”属性做为指示：

"builds": {
    "testAppDesktop": {
        "theme": "TestApp-Desktop"
    },
    "testAppTouch": {
        "theme": "TestApp-Tablet"
    }
}

步骤4：编辑output定义以便建立多个应用程序的manifests

使用如下代码替换app.json中的output配置：json

"output": {
    "base": "${workspace.build.dir}/${build.environment}/${app.name}/${build.id}",
    "page": "./index.html",
    "manifest": "../${build.id}.json",
    "deltas": {
        "enable": false
    },
    "cache": {
        "enable": false
    }
}

步骤5：更新应用程序

返回命令行提示符，输入如下命令：
sencha app refresh
这将生产manifest文件：testAppDesktop.json和testAppTouch.jsonbootstrap

步骤6：替换App.json中的CSS配置

使用如下代码替换App.json中的css配置：浏览器

"css": [{
    "path": "${build.out.css.dir}/TestApp-all.css",
    "bootstrap": true
 }]

步骤7：替换bootstrap属性以便加载appropriate manifest文件

"bootstrap": {
   "manifest": "${build.id}.json"
}

步骤8：在index.html文件中，在微加载之上，添加如下代码到一个script标记中，以加载appropriate manifest:

var Ext = Ext || {};
Ext.beforeLoad = function(tags){    
    var theme = location.href.match(/theme=([\w-]+)/);
    theme  = (theme &amp;&amp; theme[1]) || (tags.desktop ? 'testAppDesktop' : 'testAppTouch');

    Ext.manifest = theme;
    tags.test = /testMode=true/.test(location.search);
    Ext.microloaderTags = tags;
};

步骤9：生成应用程序

返回命令行提示符并输入如下命令：
sencha app build developmentmarkdown