当前位置: 代码迷 >> JavaScript >> extjs 更替皮肤
  详细解决方案

extjs 更替皮肤

热度:248   发布时间:2012-11-21 08:23:25.0
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;

  相关解决方案