extjs4.2更换主题

extjs4.2更换主题
目标
实现
1.视图层编辑各种主题样式
{
iconCls : 'themeIcon',
action : 'bbar_theme',
text : '[更换皮肤]',
menu : [{
xtype : 'menucheckitem',
group : 'theme',
checked : true,
text : '蓝色经典',
css : 'ext-all.css'
},{
xtype : 'menucheckitem',
group : 'theme',
text : '钢铁战士',
css : 'ext-all-gray.css'
}]
}
2.控制层获取更换主题事件修改主题并保存到Cookies中。

'view_layout_NorthView button[action=bbar_theme]' : { //设置主题render : function(btn,eOpts){
this.setTheme(btn);
}
},
/**
*设置主题
**/
setTheme : function(btn){
var extTheme = zc.getCookie('extTheme');//获取当前主题
var items = btn.menu.items.items;
Ext.each(items,function(item){
if(item.css == extTheme){
item.setChecked(true);
return;
}
});
},
/**
*更换主题
**/
changeTheme : function(item){
var linkid = 'extTheme';
var link = Ext.getDom(linkid);//获取CSS引用文件
var href = link.getAttribute('href');//获取href属性
var lastg = stIndexOf('/') + 1;//最后一个/所在的位置
var oldcss = href.substring(lastg);//旧的主题样式
var newcss = item.css;//新的主题样式
if(oldcss != newcss){
href = href.substring(0, lastg) + newcss;
link.setAttribute('href',href);//设置href属性
zc.setCookie(linkid,newcss,365);//保存到cookie中}
}
3.在引用extjs
4.2样式文件时从Cookies中获取当前主题样式。

<%
//获取cookie中设置的皮肤
String extTheme = "ext-all.css";//默认皮肤
Cookie[] cookies = request.getCookies();
if (cookies != null && cookies.length > 0) {
for (Cookie cookie : cookies) {
if (cookie.getName().equals("extTheme")) {
extTheme = cookie.getValue();
break;
}
}
}
%>
<!-- EXT 样式文件 -->
<link rel="stylesheet"type="text/css"id="extTheme"
href="${pageContext.request.contextPath}/js/extjs/resources/css/<%=e xtTheme%>"></link>。