extjs6 desktop 桌面多主题切换
来源:互联网 发布:淘宝怎么添加多个客服 编辑:程序博客网 时间:2024/04/30 16:28
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文件,从而实现导入不同主题。
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 文件目录
主题选择界面,参照背景选择界面设计
主题之一
主题之二
主题之三
0 0
- extjs6 desktop 桌面多主题切换
- ExtJs6 Desktop Demo 修改测试
- 多桌面切换
- 桌面软件:Desktop Girl
- 恢复Active Desktop桌面?
- centos7 安装 桌面 desktop
- 常规功能和模块自定义系统 (cfcmms)—013给Extjs6加入多界面主题(Theme)
- extjs4.1 desktop 桌面窗口切换,放大缩小卡死问题解决
- Ubuntu13.04多桌面切换
- 切换主题
- 主题切换
- 桌面搜索 Yahoo! Desktop Search
- 虚拟桌面工具 Virtual Desktop
- Ext desktop桌面菜单右键
- Show Desktop.scf 显示桌面
- Application Desktop Toolbars 桌面工具栏
- OpenOffice桌面环境(Desktop Environment)
- linux 桌面快捷方式[Desktop Entry]
- 输出单层结点
- java NIO 和阻塞I/O的区别
- 南师oj1006
- 3-24博客
- setZOrder改名叫setlLocalZOrder
- extjs6 desktop 桌面多主题切换
- Can you answer these queries?(线段树)
- 小的实例
- PAT乙级1001
- Linux下非常重要的软件切换命令
- 使用Jenkins配置自动化构建
- HDU 2036改革春风吹满地(数学)
- 时隔两年
- CardLayout 的用法和认识