lingyibin 发表于 2013-2-7 22:56:46

Extjs复习笔记(十一)--换肤

换肤功能

http://dl.iteye.com/upload/attachment/343205/424effb9-8710-384e-9627-a77378d5b5a5.png
首先写一个文件(这个文件的源码看不懂也没关系,拿着用就是了),文件名: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 : ,html: '',cls:'empty'})]            }
页: [1]
查看完整版本: Extjs复习笔记(十一)--换肤