【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>

效果图如下：

posted @ 2010-03-17 11:52 tianxin 阅读(910) 评论(0) 编辑收藏举报

甜心

技术无极限

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

公告