教你如何更换extjs皮肤.docx

教你如何更换Extjs皮肤 目标： 了解3种办法更换皮肤 内容： 1，直接在当前浏览器更换皮肤 2，在当前浏览器更换皮肤并保存到 cookie 3，在当前浏览器更换皮肤并保持到 config文件 1.直接添加其他css文件换肤. 皮肤文件：xtheme-olive.zip 下载 拷贝至U extjs 的 resources把皮肤文件解压，把css文件（如xtheme-olive.css） 目录下 拷贝至U extjs 的 resources slider.匚呂5 Ubs.css toolbarcss tree.css window.css xtheme-olivexss 生| xtheme-slatexss 解压皮肤文件，把里面的相应的 image 文件夹下的目录（比如olive）拷贝到extjs的resources 目录下images 文件夹下 口 二 resources 1+ |_^ CSS 上 LLz images + i_j default I j 囲“口 gray 田 olive ? - lJJ slate ±\ - LJ vista 设置css文件如下： Liiik typestext/css^ href=ArExtjE/reEOurcfts/css/ext-all, tms rel3stylesheet^ / type=n text/css href=PExtJs/rscuree-s/css/itlieme-oli ve css^ rel=r5tylesheet* script typ=*text/j av^scr src= ^Ext Js/ter/ext/ext_，b4se. js，v/Ecript ^script typ?F*teoct/javascript* src=rdExtJs/*jet-sll. j Erf^^/script^ 其实就是在原有的基础上添加了个 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( ); }); 疫轶应州 更换建肤： 默认 ” 要保存到cookie需要添加下面代码: var cookieArr = wi ndow.docume nt.cookie.split(;); var css = n ull; for(var i=0;icookieArr.le ngth;i++) { var arr = cookieArr[i].split(=); if(arr[0]==css) { css = arr[1]; } }; alert(css); win