【翻譯】Ext JS 5：爲不一樣設備設置不一樣的主題

時間 2019-12-09

標籤翻譯 ext 不一樣設備設置主題欄目 JavaScript 简体版

原文原文鏈接

原文：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;
};