ExtJS之实现华丽的皮肤主题更换

extjs的默认皮肤很好看,但是我们还可以变换样式切换其他皮肤.

　　1.直接添加其他css文件换肤.好多皮肤上网就可以收到的

　　如皮肤文件:xtheme-olive.zip下载

　　把皮肤文件解压,把css文件(如xtheme-olive.css)拷贝到extjs的resources目录下css文件夹里面:

     2.　解压皮肤文件,把里面的相应的 image文件夹下的目录(比如olive)拷贝到extjs的resources目录下images

     文件夹下

    记住一定要把css文件拷到extjs的resources目录下css文件夹里面:不要拷到其他目录，这样会失真的

    如果你用的是下拉列表方式显示的话可以参考下我写的代码

    thme.js

Java代码  

1. <span style="font-size: medium;">  Ext.ux.ThemeChange = Ext.extend(Ext.form.ComboBox, {  
2.  editable : false,  
3.  displayField : 'theme',  
4.  valueField : 'css',  
5.  typeAhead : true,  
6.  mode : 'local',  
7.  triggerAction : 'all',  
8.  selectOnFocus : true,  
9.  initComponent : function() {  
10.   var themes = [  
11.     ['默认', 'ext-all.css'],  
12.     ['黑色', 'xtheme-black.css'],  
13.     ['巧克力色', 'xtheme-chocolate.css'],  
14.     ['深灰色', 'xtheme-darkgray.css'],  
15.     ['浅灰色', 'xtheme-gray.css'],  
16.     ['绿色', 'xtheme-green.css'],  
17.     ['橄榄色', 'xtheme-olive.css'],  
18.     ['椒盐色', 'xtheme-peppermint.css'],  
19.     ['粉色', 'xtheme-pink.css'],  
20.     ['紫色', 'xtheme-purple.css'],  
21.     ['暗蓝色', 'xtheme-slate.css'],  
22.     ['靛青色', 'xtheme-indigo.css'],  
23.     ['深夜', 'xtheme-midnight.css'],  
24.     ['银白色', 'xtheme-silverCherry.css']  
25.   ];  
26.   this.store = new Ext.data.SimpleStore( {  
27.    fields : ['theme', 'css'],  
28.    data : themes  
29.   });  
30.   this.value = '默认';  
31.  },  
32.  initEvents : function() {  
33.   this.on('collapse', function() {  
34.       //Ext.Msg.alert("aa","bb");  
35.    Ext.util.CSS.swapStyleSheet('theme', 'extjs3.1/resources/css/'+ this.getValue());  
36.   });  
37.  }  
38. });  
39. Ext.reg('themeChange', Ext.ux.ThemeChange);  
40. </span>  

 

 3.将这个文件引入到需要的页面中去，可以自由切换皮肤了，太爽了