EXTJS學習筆記：更換皮膚

EXTJS中更換皮膚很簡單，以下是，後面附上原始碼
： 

Ext/resources/css/ext-all.css
Ext/adapter/ext/ext-base.js
Ext/ext-all.js
三個檔案從這裡下載
Code
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>EXTJS 更換皮膚</title>
   <link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
   <link rel="stylesheet" type="text/css" /><%--這句很重要，用於更換皮膚的CSS--%>
    <script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="Ext/ext-all.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

function makeCookie()
{
    var themes = 
    [
        ['default', '預設'],
        ['gray', '灰色'],
        ['darkgray', '暗灰色'],
        ['olive', '橄欖綠'],
        ['black', '黑色'],
        ['purple', '紫色'],
        ['slate', '暗藍色']
    ];
    var cbThemes = new Ext.form.ComboBox
    ({
        id: 'cbThemes',
        store: themes,
        width: 80,
        typeAhead: true,
        triggerAction: 'all',
        emptyText:'介面主題',
        selectOnFocus:true
    });
    cbThemes.on
    ({
        "select":function(field,newValue,oldValue)
                {
                   var css =   newValue.data.value;
                   //設定cookies
                   var date=new Date();
                   date.setTime(date.getTime()+30*24*3066*1000);
                   document.getElementsByTagName("link")[1].href="Ext/resources/css/xtheme-" + css + ".css";
                   document.cookie="css="+css+";expires="+date.toGMTString();
                }
    });     

    var win = new Ext.Window
    ({
        title:"更換皮膚測試視窗",renderTo:document.body,width:500,height:300,x:300,y:100,
        bbar:['皮膚選擇','',cbThemes]       
    });
    win.show();

    document.body.onload = function()
    {
          var cookiesArr=document.cookie.split(";");
          var css;
          for(var i=0;i<cookiesArr.length;i++)
          {
               var arr=cookiesArr[i].split("=");
               if(arr[0]=="css")
               {
                  css=arr[1];
                  break;
               }
          }
          document.getElementsByTagName("link")[1].href = "Ext/resources/css/xtheme-" + css + ".css";
    };
}    
Ext.onReady(makeCookie);
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>