【翻译】Ext JS 5:为不同设备设置不同的主题
原文: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:在桌面或移动设备浏览器上测试应用程序
转载于:https://www.cnblogs.com/hainange/p/6334130.html
【翻译】Ext JS 5:为不同设备设置不同的主题相关推荐
- 翻译 - EXT JS 5:Controlling an Application with Router
最近做管理后台苦于前端样式,遂想学习在Ext,继而从新发布的5下手,英语水平有限,且翻且纠结着,欢迎指正. 原文:http://docs.sencha.com/extjs/5.0.0/applicat ...
- [ExtJS5学习笔记]第二十九节 sencha ext js 5.1.0中动态更换皮肤主题
本文地址:http://blog.csdn.net/sushengmiyan/article/details/42016107 本文作者:sushengmiyan ------------------ ...
- 【翻译】如何创建Ext JS暗黑主题之一
原文:How to Create a Dark Ext JS Theme– Part 1 概述 我是不是都要演示我的Spotifinder Ext JS应用程序.它是一个很酷的应用程序,可连接到Las ...
- 《Ext JS 6.2实战》节选——使用Sencha Cmd创建应用程序
如果对Sencha Cmd不熟悉或没有了解过的,一定会很诧异为什么要用这个东西来创建应用程序,使用它又有什么好处呢?本章将会解答这些疑问,并介绍如何使用它来创建应用程序,以及应用程序创建后后如何开始进 ...
- 【翻译】针对多种设备定制Ext JS 5应用程序
原文:Tailoring Your Ext JS 5 Application for a Multi-Device World 概述 鉴于当今设备和表单因素的扩散,要针对所有这些可能性来优化应用程序已 ...
- 【翻译】使用Ext JS设计响应式应用程序
原文:Designing Responsive Applications with Ext JS 在当今这个时代,用户都希望Web应用程序无论在形状还是大小上,既能在桌面电脑,也能在移动设备上使用.使 ...
- 【翻译】对于Ext JS 5,你准备好了吗?
原文:Are You Ready for Ext JS 5? Ext JS 5:准备升级 对于Ext JS 5加入Sencha的大家庭,我们感到非常高兴!作为一个主要版本,在Ext JS 5引入了一堆 ...
- Ext JS 6 下载与设置
Decument http://docs.sencha.com/extjs/6.0.2-classic/guides/getting_started/getting_started.html Setu ...
- 【翻译】Ext JS 6.6.0的新东西
原文:<What's New in Ext JS 6.6.0> 简介 Sencha Ext JS 6.6已经支持NPM包和开放工具.Ext JS 6.6现在可以通过NPM包让开发人员使用已 ...
最新文章
- 微信小程序开发的完整流程介绍,新手必读
- 多模态生物识别有什么优势
- zabbix nginx php postgresql,debian10安装zabbix4.2+nginx+postgresql
- mysql累加某字段到达临界值,获取另一个字段的值
- 运行时修改数据库连接字符串(ConnectionString)
- 为什么python这么火_Python为什么这么火?你了解多少呢?
- 【Git】pull遇到错误:error: Your local changes to the following files would be overwritten by merge:
- linux 编辑器vim配置
- C实现web service
- java 注解学习_JAVA注解学习
- 机器学习为您揭秘雾霾怎么形成
- php 裁剪png图片,解决thinkphp裁剪png图片背景不透明的方法
- 2019全球IT行业薪酬报告:平均年薪超70万!最高薪职位竟是...
- 做php外包常用的框架
- SQL Server中关于跟踪(Trace)那点事
- R语言使用t.test函数进行t检验、使用配对的t检验(paired)检验组间不独立数据的差异是否有统计学意义
- java导出excel报表_java生成excel报表文件示例
- ffmpeg运行在服务器上,如何在脱离流媒体服务器的时候使用ffmpeg 监测.m3u8直播视频流的状态?...
- python导入siri_python实现一个简洁siri功能
- 手机酒精测试仪软件有用么,酒精测试仪软件真管用? 不靠谱!