extjs换肤实例

因为美工的需要，将extjs的换肤模块效果做好，现在放出源代码供需要的人使用,已经将实便封装成js,可以直接下载调用
 

使用的技术

1.extjs 代码库  3.2.1

2.js+cookie

3.已封装成js,可以直接调用

截图显示页

 

 

 

 

需要的js代码库：skin.js, 可以自己复制后保存

//-----------------------------初始化主题----------------------------------------------------------------  

//定义skin  array二维数给 
var skin_Array= Array_2(3,5); 
//初始化数组 index name cssUrl  列4为没有选中的图标  列5为选中时的图标 
//索引为0的主题为默认主题 
skin_Array[0][0]="0"; 
skin_Array[0][1]="blue"; 
skin_Array[0][2]="/KANQ_EGP/EXT/resources/css/xtheme-blue.css"; 
skin_Array[0][3]="/KANQ_EGP/IMAGES/skin_icons/blue_0.gif"; 
skin_Array[0][4]="/KANQ_EGP/IMAGES/skin_icons/blue_1.gif";

skin_Array[1][0]="1"; 
skin_Array[1][1]="gray"; 
skin_Array[1][2]="/KANQ_EGP/EXT/resources/css/xtheme-gray.css"; 
skin_Array[1][3]="/KANQ_EGP/IMAGES/skin_icons/gray_0.gif"; 
skin_Array[1][4]="/KANQ_EGP/IMAGES/skin_icons/gray_1.gif";

skin_Array[2][0]="2"; 
skin_Array[2][1]="access"; 
skin_Array[2][2]="/KANQ_EGP/EXT/resources/css/xtheme-access.css" ; 
skin_Array[2][3]="/KANQ_EGP/IMAGES/skin_icons/access_0.gif"; 
skin_Array[2][4]="/KANQ_EGP/IMAGES/skin_icons/access_1.gif";

//-----------------------------全局主题配置js, 需要调用主题的直接引用此js,---------created by  zhai ----

initTheme();

//以下是生成二级数组的函数 
function Array_2(nRow,nColumn){ 
    var array1=new Array(); //定义一维数组 
    for(i=0;i<nRow;i++) 
    { 
        array1[i]=new Array(); //将每一个子元素又定义为数组 
        for(n=0;n<nColumn;n++) 
        { 
            array1[i][n]=''; //此时aa[i][n]可以看作是一个二级数组 
        } 
    } 
    return array1; 
}

function initTheme() 
{   
     var theme_index= getCookie("themeindex"); 
    //var theme_url=""; 
    //根据主题名解析出主题使用的主题 
      if(theme_index != ""){ 
                 Ext.util.CSS.swapStyleSheet('theme',skin_Array[theme_index][2]); 
     } 
     else  //如果没有选择主题，加载默认主题 
     { 
                Ext.util.CSS.swapStyleSheet('theme',skin_Array[0][2]); 
     } 
} 
//----------------------------以上为取得cookie 中保存的主题并设置应用---------------------

//----------------------------------------------------------设置主题函数start-------------------------------------------------------    
function setTheme(theme_index) 
{ 
  //设置应用主题 
    Ext.util.CSS.swapStyleSheet('theme',skin_Array[theme_index][2]);    
    setCookie("themeindex",theme_index); 
}

//-----------------------------------------------------设置主题结束----------------------------------------------------------------

//-------------------------------------设置cookie--------------------------------------------------------- 
function setCookie(name, value) { 
        var today = new Date(); 
        var expires = new Date(); 
        expires.setTime(today.getTime() + 1000 * 60 * 60 * 24 * 365);   // 保存一年时间的cookie 
        document.cookie = name + "=" + escape(value) + "; expires=" + expires.toGMTString(); 
        }

//-------------------------------------获取cookie--------------------------------------------------------- 
function getCookie(Name) { 
        var search = Name + "="; 
        if (document.cookie.length > 0) { 
            offset = document.cookie.indexOf(search); 
            if (offset != -1) { 
             offset += search.length; 
             end = document.cookie.indexOf(";", offset); 
             if (end == -1) { 
              end = document.cookie.length; 
             } 
             return unescape(document.cookie.substring(offset, end)); 
            } else { 
             return (""); 
            } 
        } else { 
            return (""); 
        } 
}

此文件的说明，最上端定义了三套皮肤，可以根据自己的路径修改成相应的csss文件。说明

skin_Array[0][0]="0";     //  皮肤索引值  必要，为前台设置主题所需 
skin_Array[0][1]="blue";     //皮肤皮， 有需要的时候显示出来 
skin_Array[0][2]="/KANQ_EGP/EXT/resources/css/xtheme-blue.css";   //皮肤样式CSS 
skin_Array[0][3]="/KANQ_EGP/IMAGES/skin_icons/blue_0.gif";      //非选择时的皮肤样式图片，效果参见第三个图
skin_Array[0][4]="/KANQ_EGP/IMAGES/skin_icons/blue_1.gif";      //选择时打色的皮肤样式文件

2.设置的方法

A。前台要设置的页面添加一个js函数

//------------------------------------------------------设置选择图片的变换-------------------------------------------- 
function changeImgUrl() 
{

//debugger; 
  for(var i=0;i<skin_Array.length;i++)  //依次输出所有的skinr路径 
                    { 
                        if(getCookie("themeindex")==i)  //如果当前刚好选中的主题的话 
                        { 
                            document.getElementById('skin_'+i).src=skin_Array[i][4]; 
                        } 
                        else 
                        { 
                             document.getElementById('skin_'+i).src=skin_Array[i][3]; 
                        } 
                    }

} 
//-----------------------------------------------------------------------------------------------------------------------------

B。设置显示设置皮肤图标的代码

<script type="text/javascript"> 
                    for(var i=0;i<skin_Array.length;i++)  //依次输出所有的skinr路径 
                    { 
                        if(getCookie("themeindex")==i)  //如果当前刚好选中的主题的话 
                        { 
                            document.writeln("<img id="skin_"+i+"" src=""+skin_Array[i][4]+"" οnclick="setTheme('"+i+"');changeImgUrl(); " />"); 
                        } 
                        else 
                        { 
                             document.writeln("<img id="skin_"+i+"" src=""+skin_Array[i][3]+"" οnclick="setTheme('"+i+"');changeImgUrl();" />");    
                        } 
                    } 
             </script>

 

读取主题的方法：

在所有的页面引用skin.js 即可自动识别并应用主题，并自动应用每个主题的图片样式

注意，1.需要在extjs 库文件引用后引用skin.js

2.路径不要搞错了，不然图片和主题无法显示

以后如果要添加皮肤文件CSS的话， 只需要skin.js中添加二维数组的值即可，算是非常全面的皮肤设置模块了，全静态，所有语言均可调用