本示例主要向大家介绍Ext中皮肤的使用,用几个图片向大家介绍Ext的几种皮肤都特别的漂亮,可惜雨和熊掌不可兼得,选择你喜欢的方式,也许通过这种方式能够唤醒你的学习的食欲.
是不是很漂亮呀.
下面是实现的代码
<head runat="server">
<title>无标题页</title>
<link rel="Stylesheet" type="text/css" href="http://www.cnblogs.com/ExtJS/resources/css/ext-all.css" />
<link rel="Stylesheet" type="text/css" /> //这个很重要哦
<script type="text/javascript" src="http://www.cnblogs.com/ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ExtJS/ext-all.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ExtJS/ext-lang-zh_CN.js"></script>
</head>
function makeCookie()
{
var themes =
[
['default', '默认'],
['gray', '灰色'],
['green', '绿色'],
['olive', '橄榄绿'],
['pink', '粉色'],
['purple', '紫色'],
['slate', '暗蓝色']
];
var cbThemes = new Ext.form.ComboBox
({
id: 'cbThemes',
store: themes,
width: 80,
typeAhead: true,
triggerAction: 'all',
emptyText:'界面主题',
selectOnFocus:true
});
cbThemes.on
({
"select":function(field,newValue,oldValue)
{
var css = newValue.data.value;
//设置cookies
var date=new Date();
date.setTime(date.getTime()+30*24*3066*1000);
document.getElementsByTagName("link")[1].href=
"http://www.cnblogs.com/ExtJS/resources/css/xtheme-"+css+".css";
document.cookie="css="+css+";expires="+date.toGMTString();
}
});
var win = new Ext.Window
({
title:"测试更换皮肤窗口",renderTo:document.body,width:500,height:300,x:300,y:100,
bbar:['更换皮肤','',cbThemes]
});
win.show();
document.body.onload = function()
{
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=
"http://www.cnblogs.com/ExtJS/resources/css/xtheme-"+css+".css";
};
}
Ext.onReady(makeCookie);
posted @ 2008-10-22 17:16
殷良胜 阅读(1159)
评论(7) 编辑 收藏 网摘