教你如何更换Extjs皮肤

教你如何更换Ex tjs 皮肤 目标： 了解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