资源描述:
《教你如何更换extjs皮肤》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
1、教你如何更换Extjs皮肤目标: 了解3种办法更换皮肤内容: 1,直接在当前浏览器更换皮肤 2,在当前浏览器更换皮肤并保存到cookle 3,在当前浏览器更换皮肤并保持到config文件 1.直接添加其他css文件换肤. 皮肤文件:xtheme-olive.zip下载 把皮肤文件解压,把css文件(如xtheme-olive.css)拷贝到extjs的resources目录下css文件夹里面: 解压皮肤文件,把里面的相应的image文件夹下的目录(比如olive)拷贝到e
2、xtjs的resources目录下images文件夹下设置css文件如下:其实就是在原有的基础上添加了个xtheme-olive.css文件。定义Storevarthemes=[ ['默认','ext-all.css'], ['紫色','xtheme-purple.css'], ['橄榄色','xtheme-olive.css'], ['暗蓝色','xtheme-slate.css'], ['浅灰色','xtheme-darkgray.css'],
3、 ['绿色','xtheme-gray.css'], ['椒盐色','xtheme-galdaka.css'], ['粉色','xtheme-pink.css'], ['靛青色','xtheme-indigo.css'], ['深夜','xtheme-midnight.css'], ['银白色','xtheme-silverCherry.css'] ]; varMystore=newExt.data.SimpleStore({
4、 fields:['theme','css'], data:themes }); 定义下拉列表框: varMycombo=newExt.form.ComboBox({ fieldLabel:'更换皮肤', id:'css', triggerAction:'all', store:Mystore, disp
5、layField:'theme', valueField:'css', value:'默认', mode:'local', anchor:'95%', handleHeight:10, resizable:true, selectOnfocus:true, typeAhead:t
6、rue }); Mycombo.on//定义事件 ({ "select":function() { varcss= Mycombo.getValue(); //设置cookies vardate=newDate(); //alert(css)
7、; 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(); }
8、 })