ExtJS 皮肤主题更换和资源（转载）-CSDN博客

转自:http://blog.csdn.net/binyao02123202/article/details/6381457

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代码

<span style= "font-size: medium;" > Ext.ux.ThemeChange = Ext.extend(Ext.form.ComboBox, {
editable : false ,
displayField : 'theme' ,
valueField : 'css' ,
typeAhead : true ,
mode : 'local' ,
triggerAction : 'all' ,
selectOnFocus : true ,
initComponent : function() {
var themes = [
['默认' , 'ext-all.css' ],
['黑色' , 'xtheme-black.css' ],
['巧克力色' , 'xtheme-chocolate.css' ],
['深灰色' , 'xtheme-darkgray.css' ],
['浅灰色' , 'xtheme-gray.css' ],
['绿色' , 'xtheme-green.css' ],
['橄榄色' , 'xtheme-olive.css' ],
['椒盐色' , 'xtheme-peppermint.css' ],
['粉色' , 'xtheme-pink.css' ],
['紫色' , 'xtheme-purple.css' ],
['暗蓝色' , 'xtheme-slate.css' ],
['靛青色' , 'xtheme-indigo.css' ],
['深夜' , 'xtheme-midnight.css' ],
['银白色' , 'xtheme-silverCherry.css' ]
];
this .store = new Ext.data.SimpleStore( {
fields : ['theme' , 'css' ],
data : themes
});
this .value = '默认' ;
},
initEvents : function() {
this .on( 'collapse' , function() {
//Ext.Msg.alert("aa","bb");
Ext.util.CSS.swapStyleSheet('theme' , 'extjs3.1/resources/css/' + this .getValue());
});
}
});
Ext.reg('themeChange' , Ext.ux.ThemeChange);
</span>

[java] view plain copy print ?

<span style="font-size: medium;"> Ext.ux.ThemeChange = Ext.extend(Ext.form.ComboBox, {
editable : false,
displayField : 'theme',
valueField : 'css',
typeAhead : true,
mode : 'local',
triggerAction : 'all',
selectOnFocus : true,
initComponent : function() {
var themes = [
['默认', 'ext-all.css'],
['黑色', 'xtheme-black.css'],
['巧克力色', 'xtheme-chocolate.css'],
['深灰色', 'xtheme-darkgray.css'],
['浅灰色', 'xtheme-gray.css'],
['绿色', 'xtheme-green.css'],
['橄榄色', 'xtheme-olive.css'],
['椒盐色', 'xtheme-peppermint.css'],
['粉色', 'xtheme-pink.css'],
['紫色', 'xtheme-purple.css'],
['暗蓝色', 'xtheme-slate.css'],
['靛青色', 'xtheme-indigo.css'],
['深夜', 'xtheme-midnight.css'],
['银白色', 'xtheme-silverCherry.css']
];
this.store = new Ext.data.SimpleStore( {
fields : ['theme', 'css'],
data : themes
});
this.value = '默认';
},
initEvents : function() {
this.on('collapse', function() {
//Ext.Msg.alert("aa","bb");
Ext.util.CSS.swapStyleSheet('theme', 'extjs3.1/resources/css/'+ this.getValue());
});
}
});
Ext.reg('themeChange', Ext.ux.ThemeChange);
</span>

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

皮肤资源下载：

1. < html >
2. < head >
3. < title > 定制个性化风格 </ title >
4. < link rel = "stylesheet" type = "text/css" href = "resources/css/ext-all.css" >
5. < script type = "text/javascript" src = "js/adapter/ext/ext-base.js" > </ script >
6. < script type = "text/javascript" src = "js/ext-all.js" > </ script >
7. < script type = "text/javascript" src = "js/ext-lang-zh_CN.js" > </ script >
8. < script type = "text/javascript" >
9. //定义使用改变个性化定制的控件
10. //该控制实际上为一个可供选择样式表值的下拉框
11. //当改变下拉框的选择时则调用Ext.util.CSS.swapStyleSheet来替换其样式表路径
12. Ext Ext.ux.ThemeChange = Ext.extend(Ext.form.ComboBox,{
13. editable : false,
14. displayField : 'theme',
15. valueField : 'css',
16. typeAhead : true,
17. mode : 'local',
18. value : '默认',
19. readonly : true,
20. triggerAction : 'all',
21. selectOnFocus : true,
22. initComponent : function(){
23. var themes = [
24. ['默认', 'ext-all.css'],
25. ['黑色', 'xtheme-black.css'],
26. ['巧克力色', 'xtheme-chocolate.css'],
27. ['深灰色', 'xtheme-darkgray.css'],
28. ['浅灰色', 'xtheme-gray.css'],
29. ['绿色', 'xtheme-green.css'],
30. ['橄榄色', 'xtheme-olive.css'],
31. ['椒盐色', 'xtheme-peppermint.css'],
32. ['粉色', 'xtheme-pink.css'],
33. ['紫色', 'xtheme-purple.css'],
34. ['暗蓝色', 'xtheme-slate.css'],
35. ['靛青色', 'xtheme-indigo.css'],
36. ['深夜', 'xtheme-midnight.css'],
37. ['银白色', 'xtheme-silverCherry.css']
38. ];
39. this.store = new Ext.data.SimpleStore({
40. fields : ['theme', 'css'],
41. data : themes
42. });
43. },
44. initEvents : function(){
45. this.on('collapse', function(){
46. //实际改变风格样式的处理
47. Ext.util.CSS.swapStyleSheet('theme', 'resources/css/ext/'+ this.getValue());
48. });
49. }
50. });
51. Ext.reg('xthemeChange', Ext.ux.ThemeChange);
53. Ext.onReady(function(){
54. //实例化一个可以改变风格样式的组件
55. var pan = new Ext.Panel({
56. title:'定制个性化风格',
57. items:new Ext.ux.ThemeChange()
58. ,
59. height:200,
60. width:300
61. });
62. pan.render("hr_panel");
63. });
64. </ script >
65. </ head >
66. < body >
67. < table cellspacing = "5" cellpadding = "5" > < tr > < td > < div id = "hr_panel" > </ div > </ td > </tr > </ table >
68. </ body >
69. </ html >