extjs之实现华丽的皮肤主题更换.docxVIP

extjs 的默认皮肤很好看 ,但是我们还可以变换样式切换 其他皮肤 . 直接添加其他 css 文件换肤 .好多皮肤上网就可以收到 的 如皮肤文件 :xtheme-olive.zip 下载 把皮肤文件解压，把css文件（如xtheme-olive.css）拷贝到 extjs 的resources目录下 css文件夹里面 ： 解压皮肤文件 , 把里面的相应的 image 文件夹下的 目录（比女口 olive）拷贝至U extjs 的resources目录下 images 文件夹下 记住一定要把 css文件拷至U extjs的resources目录下 css 文件夹里面 ：不要拷到其他目录，这样会失真的 如果你用的是下拉列表方式显示的话可以参考下我写 的代码 thme.js Java 代码 lt;span style=font-size： medium;gt; Ext.ux.ThemeChange = Ext.extend（Ext.form.ComboBox, { editable ： false, displayField ： theme, valueField ： css, typeAhead ： true, mode ： local, triggerAction ： all, selectOnFocus ： true, initComponent ： function（） xtheme-black.css],[ 巧克力色 , xtheme-chocolate.css], xtheme-black.css], [ 浅灰色 ,[ 深灰色 , xtheme-darkgray.css], function() [ 浅灰色 , xtheme-gray.css],[ 绿色 xtheme-gray.css], [ 绿色 , xtheme-green.css], [ 橄榄色 , 橄榄色 , xtheme-olive.css], [ 椒盐色 , xtheme-peppermint.css],[ xtheme-peppermint.css], [粉色 , xtheme-pink.css], [ 紫色 [ 紫色 , xtheme-purple.css], [ 暗蓝色 , xtheme-slate.css], [ 靛青色 [ 靛青色 , xtheme-indigo.css], [深夜 , xtheme-midnight.css],[ xtheme-midnight.css], [ 银白色 , xtheme-silverCherry.css]]; xtheme-silverCherry.css] ]; this.store = new Ext.data.SimpleStore( {fields Ext.data.SimpleStore( { fields : [theme, css], data : themes }); this.value themes }); this.value = 默认 ; }, initEvents : //Ext.Msg.alert(aa,bb); Ext.util.CSS.swapStyleSheet(theme, extjs3.1/resources/css/+ this.getValue()); }); } }); Ext.reg(themeChange, Ext.ux.ThemeChange); lt;/spangt; 将这个文件引入到需要的页面中去，可以自由切换皮肤 了，太爽了