Extjs-实用工具用Ext.Utils.CSS切换主题和管理CSS样式

最新推荐文章于 2019-04-08 16:17:21 发布

itlwc

最新推荐文章于 2019-04-08 16:17:21 发布

阅读量5.6k

点赞数

分类专栏： Extjs 文章标签： css 工具 stylesheet function div html

本文链接：https://blog.csdn.net/itlwc/article/details/7887390

版权

Extjs 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

1.Ext.Utils.CSS切换主题

我们可以使用Ext.util.CSS.swapStyleSheet()函数来实现动态修改页面的CSS

效果图

代码

<%@ page language="java"  pageEncoding="UTF-8"%>
<%	String rootpath = request.getContextPath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/>
	<link id="theme" rel="stylesheet" type="text/css" href="" />
	<script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script>
<!--	
	火狐需要删除掉次JS
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script>
-->
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script>
	<script type="text/javascript" defer>
		Ext.onReady(function(){   
    		var panel = new Ext.Panel({   
	      		title : '定制个性化风格',
	      		renderTo : 'lwc',
	      		frame : true,    
	       		items : [{
	       			id : 'themeSelect',
	       			hiddenName : 'comboId',
	       			xtype : 'combo',
	       			fieldLabel : '组合框',
	       			triggerAction : 'all',
	       			store : new Ext.data.SimpleStore({
	       				fields : ['value','text'],
	       				data : [
	       					['default','默认风格'],
	       					['gray','灰色空间']
	       				]
	       			}),
	       			displayField : 'text',
	       			valueField : 'value',
	       			mode : 'local',
	       			emptyText : '切换皮肤'
	       		}] ,   
	         	height : 200,
	          	width : 300    
       		});
       		
     		Ext.getCmp('themeSelect').on('select',function(combo){
     			if(combo.getValue()=='default'){
     				Ext.util.CSS.swapStyleSheet('theme','<%=rootpath%>/ext/resources/css/ext-all.css');
     			}else{
     				Ext.util.CSS.swapStyleSheet('theme','<%=rootpath%>/ext/resources/css/theme-gray/panel.css');
     			}
     		});
    
       });  
    </script>
   </head>
   <body>
   		<div id='lwc'></div>
   </body>
</html>

2.Ext.Utils.CSS管理CSS样式

Ext.util.CSS主要负责管理HTML页面中的CSS样式

	<script type="text/javascript" defer>
		Ext.onReady(function(){
		   	//id为x
    		Ext.util.CSS.createStyleSheet('div{color:blue}','x');
    		//函数告知Ext刷新缓存
    		//Ext.util.CSS.refreshCache();
    		//返回页面已经设置好的所有CSS样式
    		//alert(Ext.util.CSS.getRules());
    		//根据我们设置的CSS选择符返回对应的Css样式
    		var cssObj = Ext.util.CSS.getRule('div',true);
    		alert(cssObj.style.color);//打印为blue
    		//把div的颜色修改为red
    		Ext.util.CSS.updateRule('div','color','red');
    		//删除指定id的style
    		Ext.util.CSS.removeStyleSheet('x');
       	});  
    </script>
   </head>
   <body>
   		<div>我要变色</div>
   		<p>我不变色</p>
   </body>
</html>