[ExtJS5学习笔记]第二十九节 sencha ext js 5.1.0中动态更换皮肤主题

本文地址：http://blog.csdn.net/sushengmiyan/article/details/42016107

本文作者：sushengmiyan

------------------------------------------------------------------------------------------------------------------------------------

为方便起见，使用sencha cmd创建一个工程，使用app build命令build工程，使用web start命令启动服务。

好了，现在更改下main.js中的一点代码，增加如下内容到panel中：

,{xtype: 'combo',width: '100',labelWidth: '40',fieldLabel: 'Theme',displayField: 'name',valueField: 'value',//labelStyle: 'cursor:move;',//margin: '5 5 5 5',queryMode: 'local',store: Ext.create('Ext.data.Store', {fields: ['value', 'name'],data : [{ value: 'neptune', name: 'Neptune主题' },{ value: 'neptune-touch', name: 'Neptune Touch主题' },{ value: 'crisp', name: 'Crisp主题' },{ value: 'crisp-touch', name: 'Crisp Touch主题' },{ value: 'classic', name: 'Classic主题' },{ value: 'gray', name: 'Gray主题' }]}),//value: theme,listeners: {select: function(combo) {var  theme = combo.getValue();var   href = 'ext/packages/ext-theme-'+theme+'/build/resources/ext-theme-'+theme+'-all.css';var    link = Ext.fly('theme');if(!link) {link = Ext.getHead().appendChild({tag:'link',id:'theme',rel:'stylesheet',href:''});};link.set({href:Ext.String.format(href, theme)});}}}

main.js代码应该如下所示：（完整内容）

/*** This class is the main view for the application. It is specified in app.js as the* "autoCreateViewport" property. That setting automatically applies the "viewport"* plugin to promote that instance of this class to the body element.** TODO - Replace this content of this view to suite the needs of your application.*/
Ext.define('oaSystem.view.main.Main', {extend: 'Ext.container.Container',requires: ['oaSystem.view.main.MainController','oaSystem.view.main.MainModel'],xtype: 'app-main',controller: 'main',viewModel: {type: 'main'},layout: {type: 'border'},items: [{xtype: 'panel',bind: {title: '{name}'},region: 'west',html: '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>',width: 250,split: true,tbar: [{text: 'Button',handler: 'onClickButton'},{xtype: 'combo',width: '100',labelWidth: '40',fieldLabel: 'Theme',displayField: 'name',valueField: 'value',//labelStyle: 'cursor:move;',//margin: '5 5 5 5',queryMode: 'local',store: Ext.create('Ext.data.Store', {fields: ['value', 'name'],data : [{ value: 'neptune', name: 'Neptune主题' },{ value: 'neptune-touch', name: 'Neptune Touch主题' },{ value: 'crisp', name: 'Crisp主题' },{ value: 'crisp-touch', name: 'Crisp Touch主题' },{ value: 'classic', name: 'Classic主题' },{ value: 'gray', name: 'Gray主题' }]}),//value: theme,listeners: {select: function(combo) {var  theme = combo.getValue();var  href = 'ext/packages/ext-theme-'+theme+'/build/resources/ext-theme-'+theme+'-all.css';var    link = Ext.fly('theme');if(!link) {link = Ext.getHead().appendChild({tag:'link',id:'theme',rel:'stylesheet',href:''});};link.set({href:Ext.String.format(href, theme)});}}}]},{region: 'center',xtype: 'tabpanel',items:[{title: 'Tab 1',html: '<h2>Content appropriate for the current navigation.</h2>'}]}]
});

纠结了很久的问题终于释怀了。之前看的都是使用swapstylesheet我一直么有成功过。偶尔看的了这篇文章，觉得不错，果真成功了。

http://extjs.eu/lightweight-theming/

推荐一下，这个网站，内容比较充实，界面也比较好看。就是有些插件需要花钱购买。

[ExtJS5学习笔记]第二十九节 sencha ext js 5.1.0中动态更换皮肤主题相关推荐

[ExtJS5学习笔记]第二十八节 sencha ext js 5.1.0发布版本正式发布 extjs doc下载地址
本文地址:http://blog.csdn.net/sushengmiyan/article/details/41911539 本文作者:sushengmiyan ------------------ ...
[ExtJS5学习笔记]第十五节 Extjs5表格显示不友好？panel的frame属性在作怪
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39057243 sencha官方API: http://docs.sencha.com/ ...
学习笔记第二十五节课
正则介绍_grep 正则就是一串有规律的字符串,包含特殊符号. 对以后的写shell脚本很大的帮助.可以实现很多复杂的需求. 第一个工具 grep grep 用来过滤关键词. -c 行数,过滤出来的这 ...
高等数学学习笔记——第二十九讲——罗尔定理与拉格朗日中值定理
1. 问题引入--罚单合理性问题 2. 罗尔定理(若函数在闭区间上连续,在开区间内可导,端点上的函数值相等,则必存在一处其导数为零) 3. 拉格朗日中值定理是罗尔定理的扩展 4. 拉格朗日中值定理(若 ...
概率论与数理统计学习笔记——第二十九讲——数学期望的性质
1. 数学期望的性质 2. 正态分布的数学期望为μ 3. 二项分布的数学期望为np 4. 配对问题(不服从二项分布) 5. 示例--多个独立随机变量之积的数学期望
风炫安全web安全学习第二十九节课 CSRF防御措施
风炫安全web安全学习第二十九节课 CSRF防御措施 CSRF防御措施增加token验证对关键操作增加token验证,token值必须随机,每次都不一样关于安全的会话管理(SESSION) 不要 ...
大白话5分钟带你走进人工智能-第二十九节集成学习之随机森林随机方式，out of bag data及代码(2)
大白话5分钟带你走进人工智能-第二十九节集成学习之随机森林随机方式 ,out of bag data及代码(2) 上一节中我们讲解了随机森林的基本概念,本节的话我们讲解随机森 ...
Python编程基础：第二十九节异常Exception
第二十九节异常Exception 前言实践前言我们在写代码时不可避免地会出错,这时候编译器便会抛出异常并中断程序的执行.针对这种情况,我们可以采用异常处理的方式捕捉程序中的异常信息,并将异常信 ...
风炫安全Web安全学习第三十九节课反序列化漏洞基础知识
风炫安全Web安全学习第三十九节课反序列化漏洞基础知识反序列化漏洞 0x01 序列化相关基础知识 0x01 01 序列化演示序列化就是把本来不能直接存储的数据转换成可存储的数据,并且不会丢掉数据 ...

[ExtJS5学习笔记]第二十九节 sencha ext js 5.1.0中动态更换皮肤主题

[ExtJS5学习笔记]第二十九节 sencha ext js 5.1.0中动态更换皮肤主题相关推荐

最新文章

热门文章