原文：[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：在桌面或移动设备浏览器上测试应用程序
- 前言
- extjs 4 tree 的text不显示
- 窗口显示时让字段获得焦点
- 如何编写一个使用Store更新复选框的CheckboxGroup的插件
- 如何了解事件中回调函数的参数
- 很多人需要的，带时间的日期选择器
- 一个网上找到的，在Grid中嵌套Grid的示例：Nested Grids Example
- 修改Ext.ux.GroupTabPanel让它支持延迟渲染
- 初学者比较容易犯的布局错误（手风琴布局）
- Ext JS添加子组件的误区
- 使用Ext JS，不要使用页面做组件重用，尽量不要做页面跳转
- 【翻译】十大要避免的Ext JS开发方法
- 一个不错的扩展：Ext.ux.container.ButtonSegment
- 在VS2012中实现Ext JS的智能提示太简单了
- 为什么要使用“var me=this”这样的写法
- 一个很不错的支持Ext JS 4的上传按钮
- 【翻译】热门支持小提示：2013年12月
- 【翻译】在Ext JS应用程序中使用自定义图标
- 演练Ext JS 4.2自定义主题
- 【翻译】培训提示：解决常见编码问题的简单技巧
- 【翻译】从Store生成Checkbox Group
- 【翻译】将Ext JS Grid转换为Excel表格
- 【翻译】Ext JS 5：为不同设备设置不同的主题