本文主要是介绍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代码 
- <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.将这个文件引入到需要的页面中去，可以自由切换皮肤了，太爽了
这篇关于ExtJS之实现华丽的皮肤主题更换的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
