Ext换肤（可将主题存储到Cookies中。。）

YOYO posted @ 2009年10月28日 18:10 in 【Web开发】客户端 with tags 主题 EXT Cookies 换肤 , 5991 阅读

虽然Ext 默认的皮肤Vista很不错，但是总不能所有系统都长那样嘛。。于是本文介绍下Ext 换肤的方法。。

需要时调用Ext.util.CSS.swapStyleSheet('theme', '你的css');方法即可。。

结合《extjs换肤功能》和《ExtJS 用Cookie更换主题》，这里整合了一个简单的使用下拉框切换皮肤的样例，并且会保存到cookies，在ff和ie6下测试通过：

<html>
<head>
<title>定制个性化风格</title>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href=""/>
<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext/ext-all.js"></script>
<script type="text/javascript" src="lib/ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
//定义使用改变个性化定制的控件
//该控制实际上为一个可供选择样式表值的下拉框
//当改变下拉框的选择时则调用Ext.util.CSS.swapStyleSheet来替换其样式表路径
Ext.ux.ThemeChange = Ext.extend(Ext.form.ComboBox,{
editable : false,
displayField : 'theme',
valueField : 'css',
typeAhead : true,
mode : 'local',
value : '默认',
readonly : true,
triggerAction : 'all',
selectOnFocus : true,
initComponent : function(){
var themes = [
['默认', 'ext-all.css'],
['黑色', 'xtheme-black.css'],
['深灰色', 'xtheme-darkgray.css'],
['浅灰色', 'xtheme-gray.css'],
['绿色', 'xtheme-green.css'],
['橄榄色', 'xtheme-olive.css'],
['粉色', 'xtheme-pink.css'],
['紫色', 'xtheme-purple.css'],
['暗蓝色', 'xtheme-slate.css'],
['靛青色', 'xtheme-indigo.css'],
['Slickness', 'xtheme-slickness.css'],
['深夜', 'xtheme-midnight.css']
];
this.store = new Ext.data.SimpleStore({
fields : ['theme', 'css'],
data : themes
});
},
initEvents : function(){
this.on('collapse', function(){
var name = this.getValue();
var date = new Date();
date.setTime(date.getTime() + 30*24*3066*1000);
document.cookie = "css=" + name + ";expires=" + date.toGMTString();
//实际改变风格样式的处理
Ext.util.CSS.swapStyleSheet('theme', 'lib/ext/resources/css/'+ name);
});
}
});
Ext.reg('xthemeChange', Ext.ux.ThemeChange);
Ext.onReady(function(){
var cookiesArr = document.cookie.split(";");
var cssName = "";
for(var i=0; i<cookiesArr.length; i++){
var arr = cookiesArr[i].split("=");
if(arr[0] == "css"){
cssName = arr[1];
break;
}
};
var themeList = new Ext.ux.ThemeChange();
if(cssName != ""){
Ext.util.CSS.swapStyleSheet('theme', "lib/ext/resources/css/" + cssName);
themeList.setValue(cssName);
}
//实例化一个可以改变风格样式的组件
var pan = new Ext.Panel({
title:'定制个性化风格',
items: themeList
,
height:200,
width:300
});
pan.render("hr_panel");
});
</script>
</head>
<body>
<table cellspacing="5" cellpadding="5"><tr><td><div id="hr_panel"></div></td></tr></table>
</body>
</html>