Ext皮肤切换

/**
 * @author JLee
 * @since 2011-4-20
 * @description
 * <p>实现 Ext 之间的皮肤切换</p>
 * @class Ext.ux.ThemeChange
 * @extends Ext.form.ComboBox
 */
Ext.ux.ThemeChange = Ext.extend(Ext.form.ComboBox,{
	editable : false,
	displayField : 'theme',
	valueField : 'css',
	typeAhead : true,
	mode : 'local',
	width : 90 ,
	value : '默认蓝',
	readonly : true,
	triggerAction : 'all',
	selectOnFocus : true,
	initComponent : function(){
		var themes = [
				['默认蓝', 'ext-all.css'],
				['青绿色', 'xtheme-green.css'],
				['靛青色', 'xtheme-indigo.css'],
				['深粉色', 'xtheme-pink.css'],
				['亮紫色', 'xtheme-purple.css'],
				['暗蓝色', 'xtheme-slate.css'],
				['深灰色', 'xtheme-darkgray.css'],
				['浅灰色', 'xtheme-gray.css'],
				['暗紫色', 'xtheme-midnight.css'],
				['橄榄色', 'xtheme-olive.css'],
				['纯黑色', 'xtheme-black.css'],
				['橘黄色', 'xtheme-calista.css'],
				['银黑色', 'xtheme-slickness.css']
		];
		this.store = new Ext.data.SimpleStore({
			fields : ['theme', 'css'],
			data : themes
		});
		this.readCookie() ;
	},
	initEvents : function(){
		this.on('collapse', function(){
			this.changeTheme(this.getRawValue()) ;//切换样式
			this.writeCookie(this.getRawValue()) ;//将样式代号写入 Cookie
		});
	} ,
	writeCookie : function(){
		//设定Cookie值
		Ext.state.Manager.setProvider(
			new Ext.state.CookieProvider({
				expires: new Date(new Date().getTime()+(1000*60*60*24*30)) //30 days
			}).set('adaptoflowTheme',arguments[0])
		);   
	} ,
	readCookie : function(){
		//读取Cookie值   
		var theme = new Ext.state.CookieProvider().get('adaptoflowTheme');   
		if(theme){
			this.changeTheme(theme) ;
		}else{
			this.changeTheme("默认蓝") ;
		}
	} ,
	changeTheme : function(){
			var colorCSS = "#cad9ec" ;//页头页脚的颜色变量
			var themeCSS = "" ;//Ext主题变量
			if(arguments[0]=="深灰色"){
				colorCSS = "#848484" ;
				themeCSS = "xtheme-darkgray.css" ;
			}else if(arguments[0]=="默认蓝"){
				colorCSS = "#cad9ec" ;
				themeCSS = "" ;
			}else if(arguments[0]=="橘黄色"){
				colorCSS = "#FFB361" ;
				themeCSS = "xtheme-calista.css" ;
			}else if(arguments[0]=="纯黑色"){
				colorCSS = "#2D2D2D" ;
				themeCSS = "xtheme-black.css" ;
			}else if(arguments[0]=="浅灰色"){
				colorCSS = "#EAEAEA" ;
				themeCSS = "xtheme-gray.css" ;
			}else if(arguments[0]=="青绿色"){
				colorCSS = "#C1E5D8" ;
				themeCSS = "xtheme-green.css" ;
			}else if(arguments[0]=="靛青色"){
				colorCSS = "#656796" ;
				themeCSS = "xtheme-indigo.css" ;
			}else if(arguments[0]=="暗紫色"){
				colorCSS = "#454976" ;
				themeCSS = "xtheme-midnight.css" ;
			}else if(arguments[0]=="橄榄色"){
				colorCSS = "#B6DB92" ;
				themeCSS = "xtheme-olive.css" ;
			}else if(arguments[0]=="深粉色"){
				colorCSS = "#E9DAEE" ;
				themeCSS = "xtheme-pink.css" ;
			}else if(arguments[0]=="亮紫色"){
				colorCSS = "#CFC1FF" ;
				themeCSS = "xtheme-purple.css" ;
			}else if(arguments[0]=="暗蓝色"){
				colorCSS = "#60738B" ;
				themeCSS = "xtheme-slate.css" ;
			}else if(arguments[0]=="银黑色"){
				colorCSS = "#242424" ;
				themeCSS = "xtheme-slickness.css" ;
			}
			this.setValue(arguments[0]) ;//更改样式Combo的现实值
			Ext.util.CSS.swapStyleSheet('theme', 'css/'+ themeCSS);//切换Ext皮肤
			document.getElementById("south").style.background = colorCSS ;//更换页角样式
			document.getElementById("north").style.background = colorCSS ;//更换页头样式
	} 
});
Ext.reg('xthemeChange', Ext.ux.ThemeChange);