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

使用的技术

1.extjs 代码库  3.2.1

2.js+cookie

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

截图显示页

 

image

image

image

 

 

 

需要的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]+"" onclick="setTheme(‘"+i+"’);changeImgUrl(); " />");
                        }
                        else
                        {
                             document.writeln("<img id="skin_"+i+"" src=""+skin_Array[i][3]+"" onclick="setTheme(‘"+i+"’);changeImgUrl();" />");   
                        }
                    }
             </script>

 

读取主题的方法:

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

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

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

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