extjs 更换皮肤

目标:
了解3种办法更换皮肤
内容:
1,直接在当前浏览器更换皮肤
2,在当前浏览器更换皮肤并保存到cookle
3,在当前浏览器更换皮肤并保持到config文件
   1.直接添加其他css文件换肤.
皮肤文件:xtheme-olive.zip下载
把皮肤文件解压,把css文件(如xtheme-olive.css)拷贝到extjs的resources目录下css文件夹里面:

解压皮肤文件,把里面的相应的 image文件夹下的目录(比如olive)拷贝到extjs的resources目录下images文件夹下

设置css文件如下:

其实就是在原有的基础上添加了个xtheme-olive.css文件。
定义Store
var themes = [
['默认', 'ext-all.css'],
['紫色', 'xtheme-purple.css'],
['橄榄色', 'xtheme-olive.css'],
['暗蓝色', 'xtheme-slate.css'],
['浅灰色', 'xtheme-darkgray.css'],
['绿色', 'xtheme-gray.css'],
['椒盐色', 'xtheme-galdaka.css'],
['粉色', 'xtheme-pink.css'],
['靛青色', 'xtheme-indigo.css'],
['深夜', 'xtheme-midnight.css'],
['银白色', 'xtheme-silverCherry.css']
];
var Mystore=new Ext.data.SimpleStore({
fields:['theme','css'],
data:themes
});
定义下拉列表框:
var Mycombo=new Ext.form.ComboBox({
fieldLabel:'更换皮肤',
id:'css',
triggerAction:'all',
store:Mystore,
displayField:'theme',
valueField:'css',
value:'默认',
mode:'local',
anchor:'95%',
handleHeight:10,
resizable:true,
selectOnfocus:true,
typeAhead:true
});
Mycombo.on //定义事件
({
"select":function()
{
var css = Mycombo.getValue();
//设置cookies
var date=new Date();
//alert(css);
date.setTime(date.getTime()+30*24*3066*1000);
document.getElementsByTagName("link")[1].href="ext-3.2.0/resources/css/"+css;
document.cookie="css="+css+";expires="+date.toGMTString();
}
});

要保存到cookle需要添加下面代码:
var cookieArr = window.document.cookie.split(";");
var css = null;
for(var i=0;i<cookieArr.length;i++) {
var arr = cookieArr[i].split("=");
if(arr[0]=="css") {
css = arr[1];
}
};
alert(css);
window.document.getElementsByTagName("link")[1].href="ext-3.2.0/resources/css/"+css;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值