原文：[Sencha Ext JS 5: Supporting Different Themes for Different Devices](https://druckit.wordpress.com/category/ext-js-5/) - [步驟1創建一個應用程序](#) - [步驟2定義主題](#) - [步驟3編輯Appjson文件以便支持多平臺生成](#) - [步驟4編輯output定義以便創建多個應用程序的manifests](#) - [步驟5更新應用程序](#) - [步驟6替換Appjson中的CSS配置](#) - [步驟7替換bootstrap屬性以便加載appropriate manifest文件](#) - [步驟8在indexhtml文件中在微加載之上添加以下代碼到一個script標記中以加載appropriate manifest](#) - [步驟9生成應用程序](#) - [步驟10在桌面或移動設備瀏覽器上測試應用程序](#) Sencha Ext JS 5是第一個完全支持iOS平板的Ext框架。 為應用程序添加平板支持，并能根據使用的設備自動切換桌面或基于觸碰的主題（CSS文件）可能是相當重要的任務。 本教程將演示如何將該功能添加到應用程序。 # 步驟1：創建一個應用程序 1. 在Ext JS 5文件夾打開命令行提示符 1. 運行以下命令： **sencha generate app TestApp ../TestApp** # 步驟2：定義主題 1. 在命令行提示符切換到TestApp目錄 1. 運行以下命令 1. sencha generate theme TestApp-Desktop（注：為桌面創建主題） 1. sencha generate theme TestApp-Tablet（注：為平板創建主題） 1. 在編輯器打開 /TestApp/packages/TestApp-Desktop/package.json 1. 修改“extend”屬性為“extend ext-theme-neptune” 1. 保存文件 1. 在編輯器打開/TestApp/packages/TestApp-Tablet/package.json 1. 將“extend”屬性從ext-theme-classic修改ext-theme-neptune-touch # 步驟3：編輯App.json文件以便支持多平臺生成 1. 在編輯器打開 /TestApp/app.json 1. 添加“builds”屬性作為指示： ~~~ "builds": { "testAppDesktop": { "theme": "TestApp-Desktop" }, "testAppTouch": { "theme": "TestApp-Tablet" } } ~~~ # 步驟4：編輯output定義以便創建多個應用程序的manifests 使用以下代碼替換app.json中的output配置： ~~~ "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.json # 步驟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 && theme[1]) || (tags.desktop ? 'testAppDesktop' : 'testAppTouch'); Ext.manifest = theme; tags.test = /testMode=true/.test(location.search); Ext.microloaderTags = tags; }; ~~~ # 步驟9：生成應用程序 返回命令行提示符并輸入以下命令： **sencha app build development** # 步驟10：在桌面或移動設備瀏覽器上測試應用程序