Ext.js皮肤切换源码实例下载

/**
* @author tanjian
* @since 2016-3-2
* @description
* <p>实现 Ext.js 之间的皮肤切换</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);