Extjs复习笔记（十一）--换肤

lingyibin

换肤功能


首先写一个文件（这个文件的源码看不懂也没关系，拿着用就是了），文件名：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'})]            }