ExtJS 用Cookie更換主題 - [ExtJS]
版權聲明:轉載時請以超鏈接形式標明文章原始出處和作者信息及本聲明
http://micki.blogbus.com/logs/37622244.html
每次打開頁面,要讓系統使用上次設置的主題皮膚,得用cookie來保存:
1.在主頁面裏引入
<link rel="stylesheet" type="text/css" href="lib/ext2.2/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href=""/>
其中第二個是爲了換膚時使用
2.根據cookie得到上次設置的主題
var cookiesArr = document.cookie.split(";");
var cssName = "";
for(var i=0; i<cookiesArr.length; i++){
var arr = cookiesArr[i].split("=");
if(arr[0] == "css"){
cssName = arr[1];
break;
}
};
if(cssName != ""){
Ext.util.CSS.swapStyleSheet('theme', "lib/ext2.2/resources/css/" + cssName + ".css");
}
3.在設置主題事件裏保存cookie,並加載新主題(此處使用combobox下來選擇來觸發)
Ext.getCmp('themeSelect').on('select', function(combo){
var name = combo.getValue();
var date=new Date();
date.setTime(date.getTime() + 30*24*3066*1000);
document.cookie="css=" + name + ";expires=" + date.toGMTString();
if(name == 'default'){
Ext.util.CSS.swapStyleSheet('theme', 'lib/ext2.2/resources/css/ext-all.css');
}else{
Ext.util.CSS.swapStyleSheet('theme', 'lib/ext2.2/resources/css/' + combo.getValue() + '.css');
}
});