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]+"" 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中添加二維數組的值即可，算是非常全面的皮膚設置模塊了，全靜態，所有語言均可調用