Extjs更换皮肤

目标：

      了解3种办法更换皮肤

内容：

       1，直接在当前浏览器更换皮肤

       2，在当前浏览器更换皮肤并保存到cookle

       3，在当前浏览器更换皮肤并保持到config文件

　　   1.直接添加其他css文件换肤.
          皮肤文件:xtheme-olive.zip下载
          把皮肤文件解压,把css文件(如xtheme-olive.css)拷贝到extjs的resources目录下css文件夹里面:

         

解压皮肤文件,把里面的相应的 image文件夹下的目录(比如olive)拷贝到extjs的resources目录下images文件夹下

设置css文件如下:

其实就是在原有的基础上添加了个xtheme-olive.css文件。

定义Store

var themes = [
            ['默认', 'ext-all.css'],
            ['紫色', 'xtheme-purple.css'],
            ['橄榄色', 'xtheme-olive.css'],
            ['暗蓝色', 'xtheme-slate.css'],
            ['浅灰色', 'xtheme-darkgray.css'],
            ['绿色', 'xtheme-gray.css'],
            ['椒盐色', 'xtheme-galdaka.css'],
            ['粉色', 'xtheme-pink.css'],
            ['靛青色', 'xtheme-indigo.css'],
            ['深夜', 'xtheme-midnight.css'],
            ['银白色', 'xtheme-silverCherry.css']
          ];
          var Mystore=new Ext.data.SimpleStore({
            fields:['theme','css'],
            data:themes
          });

         定义下拉列表框：

         var Mycombo=new Ext.form.ComboBox({
                    fieldLabel:'更换皮肤',
                    id:'css',
                    triggerAction:'all',
                    store:Mystore,
                    displayField:'theme',
                    valueField:'css',
                    value:'默认',
                    mode:'local',
                    anchor:'95%',
                    handleHeight:10,
                    resizable:true,
                    selectOnfocus:true,
                    typeAhead:true
          });
          Mycombo.on //定义事件
            ({
                "select":function()
                        {
                           var css =   Mycombo.getValue();
                           //设置cookies
                           var date=new Date();
                           //alert(css);
                           date.setTime(date.getTime()+30*24*3066*1000);
                           document.getElementsByTagName("link")[1].href="ext-3.2.0/resources/css/"+css;
                           document.cookie="css="+css+";expires="+date.toGMTString();
                        }
            });

   

     要保存到cookle需要添加下面代码：

     var cookieArr = window.document.cookie.split(";");  
            var css = null;
            for(var i=0;i<cookieArr.length;i++) {
            var arr = cookieArr[i].split("=");
            if(arr[0]=="css") {
                  css = arr[1];
                 }
            };
            alert(css);
            window.document.getElementsByTagName("link")[1].href="ext-3.2.0/resources/css/"+css;

面板容器

   
   
   

    
    
    
    
     1 
    
    
     var MyPanel
    
    
    =
    
    
    new
    
    
     Ext.form.FormPanel({
     

    
    
     2 
    
    
                title:
    
    
    '
    
    
    皮肤应用
    
    
    '
    
    
    ,

    
    
     3 
    
    
                renderTo:Ext.getBody(),

    
    
     4 
    
    
                width:
    
    
    300
    
    
    ,

    
    
     5 
    
    
                height:
    
    
    150
    
    
    ,

    
    
     6 
    
    
                frame:
    
    
    true
    
    
    ,

    
    
     7 
    
    
                labelWidth:
    
    
    70
    
    
    ,

    
    
     8 
    
    
                x:
    
    
    400
    
    
    ,

    
    
     9 
    
    
                y:
    
    
    100
    
    
    ,

    
    
    10 
    
    
                shadow:
    
    
    true
    
    
    ,

    
    
    11 
    
    
                floating:
    
    
    true
    
    
    ,

    
    
    12 
    
    
                draggable:{ 

    
    
    13 
    
    
                       insertProxy: 
    
    
    false
    
    
    ,
    
    
    //
    
    
    拖动时不虚线显示原始位置 
    
    
    

    
    
    14 
    
    
                      onDrag : function(e){ 

    
    
    15 
    
    
                        var pel 
    
    
    =
    
    
     
    
    
    this
    
    
    .proxy.getEl(); 

    
    
    16 
    
    
                           
    
    
    this
    
    
    .x 
    
    
    =
    
    
     pel.getLeft(
    
    
    true
    
    
    ); 

    
    
    17 
    
    
                           
    
    
    this
    
    
    .y 
    
    
    =
    
    
     pel.getTop(
    
    
    true
    
    
    );
    
    
    //
    
    
    获取拖动时panel的坐标 
    
    
    

    
    
    18 
    
    
                var s 
    
    
    =
    
    
     
    
    
    this
    
    
    .panel.getEl().shadow; 

    
    
    19 
    
    
                
    
    
    if
    
    
     (s){ 

    
    
    20 
    
    
                    s.realign(
    
    
    this
    
    
    .x, 
    
    
    this
    
    
    .y, pel.getWidth(), pel.getHeight()); 

    
    
    21 
    
    
                } 

    
    
    22 
    
    
                }, 

    
    
    23 
    
    
                endDrag : function(e){ 

    
    
    24 
    
    
                          
    
    
    this
    
    
    .panel.setPosition(
    
    
    this
    
    
    .x, 
    
    
    this
    
    
    .y);
    
    
    //
    
    
    移动到最终位置 
    
    
    

    
    
    25 
    
    
                    } 

    
    
    26 
    
    
                },

    
    
    27 
    
    
                labelAlign:
    
    
    '
    
    
    center
    
    
    '
    
    
    ,

    
    
    28 
    
    
                labelSeparator:
    
    
    '
    
    
    :
    
    
    '
    
    
    ,

    
    
    29 
    
    
                items:[

    
    
    30 
    
    
                    Mycombo

    
    
    31 
    
    
                ]

    
    
    32 
    
    
            });
   
   
   

本课件源码：

代码

   
   
   

    
    
    
    
      1 
    
    
    <%
    
    
    @ Page Language
    
    
    =
    
    
    "
    
    
    C#
    
    
    "
    
    
     AutoEventWireup
    
    
    =
    
    
    "
    
    
    true
    
    
    "
    
    
     CodeBehind
    
    
    =
    
    
    "
    
    
    Ext8.aspx.cs
    
    
    "
    
    
     Inherits
    
    
    =
    
    
    "
    
    
    EXT1.Ext8
    
    
    "
    
    
     
    
    
    %>
    
    
    

    
    
      2 
    
    
    

    
    
      3 
    
    
    <!
    
    
    DOCTYPE html PUBLIC 
    
    
    "
    
    
    -//W3C//DTD XHTML 1.0 Transitional//EN
    
    
    "
    
    
     
    
    
    "
    
    
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
    
    
    "
    
    
    >
    
    
    

    
    
      4 
    
    
    

    
    
      5 
    
    
    <
    
    
    html xmlns
    
    
    =
    
    
    "
    
    
    http://www.w3.org/1999/xhtml
    
    
    "
    
    
     
    
    
    >
    
    
    

    
    
      6 
    
    
    <
    
    
    head runat
    
    
    =
    
    
    "
    
    
    server
    
    
    "
    
    
    >
    
    
    

    
    
      7 
    
    
        
    
    
    <
    
    
    title
    
    
    >
    
    
    第八课,Extjs中工具栏和菜单栏介绍与应用
    
    
    </
    
    
    title
    
    
    >
    
    
    

    
    
      8 
    
    
        
    
    
    <
    
    
    link href
    
    
    =
    
    
    "
    
    
    ext-3.2.0/resources/css/ext-all.css
    
    
    "
    
    
     rel
    
    
    =
    
    
    "
    
    
    stylesheet
    
    
    "
    
    
     type
    
    
    =
    
    
    "
    
    
    text/css
    
    
    "
    
    
     
    
    
    />
    
    
    

    
    
      9 
    
    
        
    
    
    <
    
    
    link rel
    
    
    =
    
    
    "
    
    
    Stylesheet
    
    
    "
    
    
     type
    
    
    =
    
    
    "
    
    
    text/css
    
    
    "
    
    
     
    
    
    />
    
    
     

    
    
     10 
    
    
        
    
    
    <
    
    
    script src
    
    
    =
    
    
    "
    
    
    ext-3.2.0/adapter/ext/ext-base.js
    
    
    "
    
    
     type
    
    
    =
    
    
    "
    
    
    text/javascript
    
    
    "
    
    
    ></
    
    
    script
    
    
    >
    
    
    

    
    
     11 
    
    
        
    
    
    <
    
    
    script src
    
    
    =
    
    
    "
    
    
    ext-3.2.0/ext-all.js
    
    
    "
    
    
     type
    
    
    =
    
    
    "
    
    
    text/javascript
    
    
    "
    
    
    ></
    
    
    script
    
    
    >
    
    
    

    
    
     12 
    
    
    

    
    
     13 
    
    
        
    
    
    <
    
    
    script src
    
    
    =
    
    
    "
    
    
    MyJS/Skin.js
    
    
    "
    
    
     type
    
    
    =
    
    
    "
    
    
    text/javascript
    
    
    "
    
    
    >&l