【ext js 学习笔记】更换界面皮肤

界面更换皮肤一直都是一个比较炫的功能。

页面代码如下：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"  xml:lang ="zh"  lang ="zh"  dir ="ltr" >
< head >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
     < title > ext demo </ title >
    
     < link  rel ="Stylesheet"  type ="text/css"  href ="resources/css/ext-all.css"   />
     < link  rel ="Stylesheet"  type ="text/css"   />
     < script  type ="text/javascript"  src ="adapter/ext/ext-base.js" ></ script >
     < script  type ="text/javascript"  src ="ext-all.js" ></ script >
     < script  type ="text/javascript"  src ="src/locale/ext-lang-zh_CN.js" ></ script >
</ head >
< body >
< form  id ="form1" >
< script  type ="text/javascript" >
function  makeCookie()
{
     var  themes  =  
    [
        [ ' gray ' ,  ' 灰色 ' ],
        [ ' blue ' ,  ' 蓝色 ' ]
    ];
     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.field1;
            // 设置cookies
            var  date = new  Date();
           date.setTime(date.getTime() + 30 * 24 * 3066 * 1000 );
           document.getElementsByTagName( " link " )[ 1 ].href = " 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 = " resources/css/xtheme- " + css + " .css " ;
    };
}    
Ext.onReady(makeCookie);

</ script >
</ form >

</ body >
</ html >

效果图如下：

 

转载于:https://www.cnblogs.com/tianxin2001x/archive/2010/03/17/1687987.html