【翻译】Ext JS 5：为不同设备设置不同的主题 · Ext JS开发常见问题汇总

原文：[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：在桌面或移动设备浏览器上测试应用程序