extjs换肤
1.直接添加其他css文件换肤.
皮肤文件:xtheme-olive.zip下载
把皮肤文件解压,把css文件(如xtheme-olive.css)拷贝到extjs的resources目录下css文件夹里面:
解压皮肤文件,把里面的相应的 image文件夹下的目录(比如olive)拷贝到extjs的resources目录下images文件夹下
设置css文件如下:
其实就是在原有的基础上添加了个xtheme-olive.css文件。
效果图:
2.配合cookie实现网站换肤
我们的目标:
用户可以选择自己的样式，当下次用户打开的网站(在cookie的有效期内)的时候，自动读取cookie，显示先前选择的爱好的样式！
*/
我们的原理:
1.document.getElementsByTagName(“link“)[1].href//获取或者设置第二个css文件的href值
2.var date=new Date();//今天的日期
date.setTime(date.getTime()+30*24*3066*1000);//30天后的日期
document.cookie=“css=“+name+“;expires=“+date.toGMTString();//设置30天后过期的cookies(名称为css)
3.var cookiesArr=document.cookie.split(“;“);
var css;
for(var i=0;i<cookiesArr.length;i++)
{
var arr=cookiesArr[i].split(“=“);
if(arr[0]==“css“)
{
css=arr[1];
break;
}
}
//这段代码是获取cookies中想要的名称为css的cookies，并保存在变量css中去
4.如果不设置expires的话，会在关闭浏览器后cookies失效。
html代码:
<a href=”javascript:void(0)” onclick=”changecss(”)”>还原</a>
<a href=”javascript:void(0)” onclick=”changecss(‘xtheme-olive.css’)”>绿色</a>
<a href=”javascript:void(0)” onclick=”changecss(‘xtheme-gray.css’)”>灰色</a>
<a href=”javascript:void(0)” onclick=”changecss(‘xtheme-purple.css’)”>purple</a>
关键js代码:
{
var date=new Date();
date.setTime(date.getTime()+30*24*3066*1000);
document.getElementsByTagName(“link“)[1].href=“ExtJs/resources/css/“+name;
document.cookie=“css=“+name+“;expires=“+date.toGMTString();//设置cookies
}效果图(下次打开浏览器还是这样):
其实，最简单的换肤函数用Extjs里的函数就可以实现：
Ext.util.CSS.swapStyleSheet("theme", "../../resources/css/xtheme-" + theme + ".css");
如果想增加一个换肤工具条，可以如下做：
1、在html页面（每一个例子）的body中间加上以下代码（换肤工具条）
<div id=”lib-bar” style=”border-width:0 1px 1px; text-align:right; width:150px; position:absolute; right:0px;left:auto; top:2px; “><div id=”lib-bar-inner”>
<span>Theme:</span>
<select id=”exttheme”>
<option value=”default”>Ext Blue</option>
<option value=”gray”>Gray Theme</option>
<option value=”black”>Black Theme</option>
<option value=”green”>Green Theme</option>
<option value=”calista”>Calista Theme</option>
<option value=”darkgray”>Darkgray Theme</option>
<option value=”indigo”>Indigo Theme</option>
<option value=”midnight”>Midnight Theme</option>
<option value=”olive”>Olive Theme</option>
<option value=”pink”>Pink Theme</option>
<option value=”purple”>Purple Theme</option>
<option value=”slate”>Slate Theme</option>
<option value=”slickness”>Slickness Theme</option>
</select></div></div>
2、更改 ./examples/examples.js 文件中的 40行
将Ext.getBody().addClass('x-'+theme);
改为：
Ext.util.CSS.swapStyleSheet("theme", "../../resources/css/xtheme-" + theme + ".css");
通过ExtJs插件也可以实现换肤：
<html>
<head>
<title>定制个性化风格</title>
<link rel=”stylesheet” type=”text/css” href=”resources/css/ext-all.css”>
<script type=”text/javascript” src=”js/adapter/ext/ext-base.js”></script>
<script type=”text/javascript” src=”js/ext-all.js”></script>
<script type=”text/javascript” src=”js/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-chocolate.css'],
['深灰色', 'xtheme-darkgray.css'],
['浅灰色', 'xtheme-gray.css'],
['绿色', 'xtheme-green.css'],
['橄榄色', 'xtheme-olive.css'],
['椒盐色', 'xtheme-peppermint.css'],
['粉色', 'xtheme-pink.css'],
['紫色', 'xtheme-purple.css'],
['暗蓝色', 'xtheme-slate.css'],
['靛青色', 'xtheme-indigo.css'],
['深夜', 'xtheme-midnight.css'],
['银白色', 'xtheme-silverCherry.css']
];
this.store = new Ext.data.SimpleStore({
fields : ['theme', 'css'],
data : themes
});
},
initEvents : function(){
this.on(‘collapse’, function(){
//实际改变风格样式的处理
Ext.util.CSS.swapStyleSheet(‘theme’, ‘resources/css/ext/’+ this.getValue());
});
}
});
Ext.reg(‘xthemeChange’, Ext.ux.ThemeChange);
Ext.onReady(function(){
//实例化一个可以改变风格样式的组件
var pan = new Ext.Panel({
title:’定制个性化风格’,
items:new Ext.ux.ThemeChange()
,
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>
var cookiesArr=document.cookie.split(“;“);
var css;
for(var i=0;i<cookiesArr.length;i++)
{
var arr=cookiesArr[i].split(“=“);
if(arr[0]==“css“)
{
css=arr[1];
break;
}
}
document.getElementsByTagName(“link“)[1].href=“ExtJs/resources/css/“+css;//读取并应用css
