Extjs复习笔记（十一）--换肤-优快云博客

本文链接：https://blog.youkuaiyun.com/lybacm/article/details/83742610

本文介绍如何在ExtJS应用中实现换肤功能，通过创建主题切换组件并配置不同的样式表来快速更改应用外观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

换肤功能

首先写一个文件（这个文件的源码看不懂也没关系，拿着用就是了），文件名：themeChange.js

内容如下:

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']
		];
		this.store = new Ext.data.SimpleStore( {
			fields : ['theme', 'css'],
			data : themes
		});
		this.value = '默认';
	},
	initEvents : function() {
		this.on('collapse', function() {
			Ext.util.CSS.swapStyleSheet('theme', '../resources/css/'+ this.getValue());
		});
	}
});
Ext.reg('themeChange', Ext.ux.ThemeChange);

把下面包内.css的皮肤文件放到ext/resources/css目录下。当然放到其它目录下也行，不过得修改上面代码中的地址。

之后再把前一篇日志内的代码中Viewport里面items的第二个{}代码修改如下：

{
                region:'west',		
				title : '功能菜单',
				layout: 'accordion',
                width:198,
				collapsible: true,
				autoScroll:true,
				split:true,
				items : [
					new Ext.Panel({
						title: '更换皮肤：',
						tbar : [
							'皮肤选择：',
							{
								xtype : 'themeChange',
								width : 120,
								listWidth : 120
							},
							'->'
						],
						html: '',
						cls:'empty'
					})
				]
            }