extjs6 desktop 桌面多主题切换

简介: extjs6 desktop想实现多主题切换,因为项目要编译,不像extjs4一样方便的切换主题,采用Ext.util.CSS.swapStyleShee的API进行切换主题,虽然可以无刷新即时切换,但有原主题残留,导致多主题叠加的现象,效果并不理想,因此,找到以下方法实现切换。
extjs6 desktop想实现多主题切换,因为项目要编译,不像extjs4一样方便的切换主题,采用Ext.util.CSS.swapStyleShee的API进行切换主题,虽然可以无刷新即时切换,但有原主题残留,导致多主题叠加的现象,效果并不理想,因此,找到以下方法实现切换。
1.修改项目根目录下的 app.json文件, 找到 "theme": "theme-crisp",一节,改为其它主题,比如 "theme": "theme-triton",
2.在cmd下用命令 sencha app build production编译项目
3.转到目录 \build\production\desktop\resources  把Desktop-all.css,Desktop-all_1.css,Desktop-all_2.css 把文件名分别改为:Desktop-all-triton.css,Desktop-all_1-triton.css,Desktop-all_2-triton.css
4. 在记事本修改Desktop-all-triton.css文件 内容中包含的文件名相应的修改
5. 转到 \build\production\desktop目录 改名app.json 改为 triton.json
6. 换为另外一种主题 如"theme": "theme-aria", 重复1-5步骤 直至所有主题生成完毕
7. 修改\build\production\desktop目录下的index.html  找到 Ext.manifest=Ext.manifest||"app.json"; 语句 替换为 var t=location.href.match(/theme=([\w-]+)/);t=(t&&t[1])||'app';Ext.manifest=Ext.manifest||(t+'.json');
即根据URL参数决定使用哪一个上述生成的json文件,进而导入不同的css文件,从而实现导入不同主题。

8.可以在系统中增加主题切换选择菜单,根据选择项修改url地址栏参数,实现刷新切换主题


Demo  http://demo.linbsoft.com/ext6desktop


生成的json文件

 


css 文件目录



主题选择界面,参照背景选择界面设计

 


主题之一

 



主题之二

 


主题之三






目录
相关文章
|
JavaScript 前端开发 Windows
jQuery的ztree仿windows文件新建和拖拽效果
jQuery的ztree仿windows文件新建和拖拽效果
59 0
|
Linux
QT桌面(实现界面的滑动切换)
QT桌面(实现界面的滑动切换)
295 0
SublimeText配置Markdown编辑及预览
本文详细介绍了如何配置Sublime Text及相关插件,使之成为Markdown编辑器并且能够在浏览器中实现预览功能。
|
8月前
|
API CDN
Electron Markdown编辑器实战:资源管理器实现
Electron Markdown编辑器实战:资源管理器实现
|
JavaScript 搜索推荐 Windows
基于jquery开发的Windows 12网页版
基于jquery开发的Windows 12网页版
153 0
基于jquery开发的Windows 12网页版
|
前端开发 API
Electron桌面端所见即所得-Electron练习生
突然让你开发Electron应用,你能hold住吗? 如果领导突然说需要开发一款前端桌面端应用,那么对于我们前端er来说选择Electron是一件顺理成章的事情。但事实上很多同学对于Electron都不太了解和熟悉。 如果突然让我们去开发Electron应用,很多人都会陷入迷茫和懵逼的状态。然后在依靠网上相对较少的资料,慢慢摸索、一路踩坑的完成Electronn的需求。 为了解决上述问题,我们完成了一个项目,并把它开源了出来, 希望能够对大家学习Electron有点帮助。 快速学习和上手Electron: electron-playground electron-playground是我司(好
294 1
Electron桌面端所见即所得-Electron练习生
|
移动开发 前端开发 数据可视化
从零使用electron搭建桌面端可视化编辑器Dooring
之前有朋友希望我基于H5-Dooring开发一款桌面端应用, 最近刚好有时间, 就花了小半天时间从零使用electron开发了桌面端的离线软件Dooring-electron. 因为之前用electron比较少, 今天刚好学了一下, 也基本把前后端打通了, 文末我会放dooring-electron的github地址供大家参考学习. 如果大家有更好的方案, 可以随时和我讨论.
565 0
|
JavaScript 前端开发
js实现仿桌面右键,出现右键菜单功能
javascript有右键事件,可以利用这个事件,实现右键菜单功能。 喜欢点个赞。转发备注出处。
4797 0
js实现仿桌面右键,出现右键菜单功能
|
C#
WPF中桌面屏保的制作(主要代码)
原文:WPF中桌面屏保的制作(主要代码) 制作要点:(1) 使用System.Windows.Threading.DispatcherTimer;(2) 将Window属性设置为:      this.WindowState = WindowState.Maximized;      this.WindowStyle = WindowStyle.None;      this.ResizeMode = ResizeMode.NoResize;(3) 按ESC键时,关闭窗口。
852 0
|
Go
UWP 拖拽文件
原文:UWP 拖拽文件 桌面环境下的UWP,加入拖拽模式还是会增加用户好感度的。 好了,先看一下我最新研发的【小微识花】吧,演示一下       炫酷,有没有, 而且这识别速度,也是杠杠的~~~    关于拖拽的实现,一般有两个方法。
975 0