Ext换肤

最新推荐文章于 2020-12-31 08:37:48 发布

lukezu

最新推荐文章于 2020-12-31 08:37:48 发布

阅读量109

点赞数

CC 4.0 BY-SA版权

文章标签： EXT CSS

本文链接：https://blog.youkuaiyun.com/lukezu/article/details/83637268

本文介绍了一个使用Ext框架实现的界面风格动态切换方案。通过下拉菜单选择不同的样式表，即可实时更改网页的主题颜色。该方案利用了Ext.util.CSS.swapStyleSheet方法来实现样式的快速更换，并且能够记住用户的偏好设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.
<html>
2.
<head>
3.
<title>定制个性化风格</title>
4.
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css">
5.
<link rel="stylesheet" type="text/css" href=""/>
6.
<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
7.
<script type="text/javascript" src="lib/ext/ext-all.js"></script>
8.
<script type="text/javascript" src="lib/ext/ext-lang-zh_CN.js"></script>
9.
<script type="text/javascript">
10.
//定义使用改变个性化定制的控件
11.
//该控制实际上为一个可供选择样式表值的下拉框
12.
//当改变下拉框的选择时则调用 Ext.util.CSS.swapStyleSheet来替换其样式表路径
13.
Ext.ux.ThemeChange = Ext.extend(Ext.form.ComboBox,{
14.
editable : false,
15.
displayField : 'theme',
16.
valueField : 'css',
17.
typeAhead : true,
18.
mode : 'local',
19.
value : '默认',
20.
readonly : true,
21.
triggerAction : 'all',
22.
selectOnFocus : true,
23.
initComponent : function(){
24.
var themes = [
25.
['默认', 'ext-all.css'],
26.
['黑色', 'xtheme-black.css'],
27.
['深灰色', 'xtheme-darkgray.css'],
28.
['浅灰色', 'xtheme-gray.css'],
29.
['绿色', 'xtheme-green.css'],
30.
['橄榄色', 'xtheme-olive.css'],
31.
['粉色', 'xtheme-pink.css'],
32.
['紫色', 'xtheme-purple.css'],
33.
['暗蓝色', 'xtheme-slate.css'],
34.
['靛青色', 'xtheme-indigo.css'],
35.
['Slickness', 'xtheme-slickness.css'],
36.
['深夜', 'xtheme-midnight.css']
37.
];
38.
this.store = new Ext.data.SimpleStore({
39.
fields : ['theme', 'css'],
40.
data : themes
41.
});
42.
},
43.
initEvents : function(){
44.
this.on('collapse', function(){
45.
var name = this.getValue();
46.
var date = new Date();
47.
date.setTime(date.getTime() + 30*24*3066*1000);
48.
document.cookie = "css=" + name + ";expires=" + date.toGMTString();
49.

50.
//实际改变风格样式的处理
51.
Ext.util.CSS.swapStyleSheet('theme', 'lib/ext/resources/css/'+ name);
52.
});
53.
}
54.
});
55.
Ext.reg('xthemeChange', Ext.ux.ThemeChange);
56.

57.
Ext.onReady(function(){
58.
var cookiesArr = document.cookie.split(";");
59.
var cssName = "";
60.

61.
for(var i=0; i<cookiesArr.length; i++){
62.
var arr = cookiesArr[i].split("=");
63.
if(arr[0] == "css"){
64.
cssName = arr[1];
65.
break;
66.
}
67.
};
68.

69.
var themeList = new Ext.ux.ThemeChange();
70.

71.
if(cssName != ""){
72.
Ext.util.CSS.swapStyleSheet('theme', "lib/ext/resources/css/" + cssName);
73.
themeList.setValue(cssName);
74.
}
75.

76.
//实例化一个可以改变风格样式的组件
77.
var pan = new Ext.Panel({
78.
title:'定制个性化风格',
79.
items: themeList
80.
,
81.
height:200,
82.
width:300
83.
});
84.
pan.render("hr_panel");
85.
});
86.
</script>
87.
</head>
88.
<body>
89.
<table cellspacing="5" cellpadding="5"><tr><td><div id="hr_panel"></div></td></tr></table>
90.
</body>
91.
</html>

解压后覆盖resources目录下的css和images即可，注意需要修改css中的图像URL……