js:
//操作cookie類
var myCookie =
{
isAllowed: document.cookie && document.cookie != '',
set: function(cn, cv, d, dm)
{
var now = new Date();
var expire = new Date();
if (d == null || d == 0)
{
d = 1;
}
expire.setTime(now.getTime() + 3600000 * 24 * d);
var cookieStr = cn + '=' + encodeURI(cv) + ';expires=' + expire.toGMTString() + ';domain=' + window.location.hostname + '; path=/';
document.cookie = cookieStr;
},
clear: function(cn, dm)
{
if (this.get(name))
{
document.cookie = cn + '=' + ((domain) ? '; domain=' + dm : '') + '; expires=Thu, 01-Jan-70 00:00:01 GMT';
}
},
get: function(cn)
{
var dc = document.cookie;
var prefix = cn + '=';
var begin = dc.indexOf('; ' + prefix);
if (begin == -1)
{
begin = dc.indexOf(prefix);
if (begin != 0)
{
return null;
}
}
else
{
begin += 2;
}
var end = document.cookie.indexOf(';', begin);
if (end == -1)
{
end = dc.length;
}
return decodeURI(dc.substring(begin + prefix.length, end));
}
};

//換膚類
var mySwitchSkiner=
{
onItemSwitchSkin : function (item)
{
var cssName = item.value;
if(cssName == null || cssName == '')
{
cssName = 'ext-all.css';
}
Ext.util.CSS.swapStyleSheet('theme', '/js/ext/resources/css/' + cssName);
myCookie.set("myThemeCss", cssName, '30',"");
},
initSwitchSkin : function()
{
var cssName = myCookie.get("myThemeCss");
//alert(myCookie.isAllowed + "->" + cssName);
if(cssName == null || cssName == '')
{
cssName = 'ext-all.css';
}
Ext.util.CSS.swapStyleSheet('theme', '/js/ext/resources/css/' + cssName);
}
}

//菜單類
var mySwitchSkinMenu = new Ext.menu.Menu({
id: 'mainMenu',
style: {
overflow: 'visible'
},
items: [{
id:'defalutTheme',
text: '默認',
checked: true,
value:'ext-all.css',
group: 'theme',
handler: mySwitchSkiner.onItemSwitchSkin
},{
id:'grayTheme',
text: '淺灰色',
value:'xtheme-gray.css',
checked: false,
group: 'theme',
handler: mySwitchSkiner.onItemSwitchSkin
}]
});
html
<%@ page language="java" pageEncoding="UTF-8"%>
<%
String domain = request.getServerName();
System.out.println(domain);
%>
<html>
<head>
<title>定制個性化風格</title>
<link rel="stylesheet" type="text/css" href="/js/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="/js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/js/ext/ext-all.js"></script>
<script type="text/javascript" src="/main/switchSkin.js" charset="gb2312"></script>
<script type="text/javascript">
Ext.onReady(function(){
mySwitchSkiner.initSwitchSkin();
//實例化一個可以改變風格樣式的組件
var pan = new Ext.Panel({
title:'定制個性化風格',
height:200,
width:300,
tbar: [
{
text:'換膚',
xtype:'splitbutton',
width:100,
id:'sDepName',
name:'sDepName',
menu:mySwitchSkinMenu
}
]
});
pan.render("hr_panel");
});
</script>
</head>
<body>
<table cellspacing="5" cellpadding="5"><tr><td><div id="hr_panel"></div></td></tr></table>
</body>
</html>
原創

































































































html









































原創