您的位置：首页 > Web前端 > CSS

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

2012-08-20 17:08 459 查看
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航