【翻译】Ext JS 5:为不同设备设置不同的主题
来源:互联网 发布:java.util.base64 类 编辑:程序博客网 时间:2024/06/06 04:06
原文:Sencha Ext JS 5: Supporting Different Themes for Different Devices
- 步骤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:创建一个应用程序
- 在Ext JS 5文件夹打开命令行提示符
- 运行以下命令:
sencha generate app TestApp ../TestApp
步骤2:定义主题
- 在命令行提示符切换到TestApp目录
- 运行以下命令
- sencha generate theme TestApp-Desktop(注:为桌面创建主题)
- 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配置:
"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:在桌面或移动设备浏览器上测试应用程序
0 0
- 【翻译】Ext JS 5:为不同设备设置不同的主题
- 【翻译】在Ext JS中创建特定主题的重写
- js控制不同设备图片的大小
- unity3d移动平台性能优化专题(4):为不同性能的设备设置不同的性能级别
- listview为不同的item设置不同的点击事件
- vsftp为不同用户设置不同的ftp的根目录
- 为不同的Panel设置透明属性
- 为ListView设置不同的布局
- EXT JS中如何设置应用的主题
- 【翻译】针对多种设备定制Ext JS 5应用程序
- 适应不同的设备
- 支持不同的设备
- 支持不同的设备
- 支持不同的设备
- Ext JS在不同环境下使用不同域名
- 【翻译】Ext JS 5的平板支持
- Responsive设计——不同设备的分辨率设置
- Vim 的 tab 设置(2): 使用 autocmd 为不同的文件类型应用不同的 tab 设置
- androidのAPP性能之终端兼容优化笔记
- Xcode编译Undefined symbols for architecture xxx 错误总结
- Javascript中不使用中文来命名变量和函数名?
- mysql双机互备
- AsyncTask的使用
- 【翻译】Ext JS 5:为不同设备设置不同的主题
- Linux初学,利用共享内存,有名管道,select实现两个用户之间的自由对话。
- gem5的安装编译及测试运行
- java web 简析--二,TOMCAT结构及运行过程解析
- listview/gridview上checkbox和button以及item获取焦点的问题
- 状态空间
- 2.27RemoveNthNodeFromEndofList
- Mac下Eclipse项目导入到Android Studio
- spark学习逻辑回归