ExtJs控制之更换皮肤

  今天和大家分享一个更换皮肤的控件，但是狠是失望，因为ext官方提供的css很粗糙，最好让美工加以修改，不说了，代码如下.

Ext.ux.ThemeCycleButton = Ext.extend(Ext.CycleButton, {



	/**

	 * file 你的css名称

	 * text 下拉框的名称

	 * iconCls 设置图标css

	 */									 

	cssItems:[

		{file: 'ext-all.css', text: '蓝色月影 ',checked:true,  iconCls: 'icon-blue-theme'},

		{file: 'xtheme-gray.css', text: '灰色回忆 ', iconCls: 'icon-gray-theme'},

		{file: 'xtheme-slate.css', text: '深蓝心情 ', iconCls: 'icon-blue-theme'},

		{file: 'xtheme-black.css', text: '黑色物语 ', iconCls: 'icon-blue-theme'},

		{file: 'xtheme-olive.css', text: '绿色芳香 ', iconCls: 'icon-blue-theme'},

		{file: 'xtheme-purple.css', text: '诱惑紫色 ', iconCls: 'icon-blue-theme'}

	],

	themeVar:'style',

	headVar: 'head',

	//cssPath是你放css的位置，这个路径要是弄错了，神仙也出不来的

	cssPath:'js/ext2/resources/css/',

	

	initComponent: function() {

		Ext.apply(this, {

		    showText: true,

			prependText: ' ',

   			items: this.cssItems

		});

		if(Ext.state.Manager){ 

        	var selectedTheme = Ext.state.Manager.get(this.themeVar); 

            if(selectedTheme){ 

				for(var i=0; i<this.items.length;i++){

					if (this.items[i].file == selectedTheme){

						this.items[i].checked = true;

//						this.setActiveItem(this.items[i], true); //error ??

						this.changeHandler(this, this.items[i]);

//						this.changeHandler.defer(1000, this, [this, this.items[i]]);

						break;

					}

				}

            } 

        }

		Ext.ux.ThemeCycleButton.superclass.initComponent.apply(this, arguments);

	},

	

	changeHandler: function(o, i){

        if(Ext.state.Manager.getProvider()) {

            Ext.state.Manager.set(this.themeVar, i.file);

			Ext.state.Manager.set(this.headVar, i.head);

        }

		Ext.util.CSS.swapStyleSheet(this.themeVar, this.cssPath + i.file);

		Ext.util.CSS.getRule('.x-panel-body', true).style.background = 'url(' + i.head + ')';

//		Ext.util.CSS.updateRule('.x-panel-body', 'background', 'url(' + i.head + ')');

		if(Ext.getCmp('viewport')){

   	    	Ext.getCmp('viewport').layout.center.panel.setSize(Ext.getCmp('viewport').layout.center.getSize().width + 1);

			Ext.getCmp('viewport').doLayout();

			Ext.getCmp('viewport').layout.center.panel.setSize(Ext.getCmp('viewport').layout.center.getSize().width - 1);

			Ext.getCmp('viewport').doLayout();

		}

	}

	        

});



Ext.reg('themecyclebutton', Ext.ux.ThemeCycleButton);

例子如下:

var tb=new Ext.Toolbar('toolbar-div');//创建一个工具条



        tb.add(

		    '  ',

		    '  ',

 		 	'  ',

			'<b>sam.zhang<b>',

			'  ',

			'  ',

			'2008-11-10 11:20 ',

			'  ',

			'  ',

			'这是第35次登陆系统',

			'->',

			' ',

			'',

			'->',

			new Ext.Toolbar.Button({

	           text: 'WEbQQ',

			   handler: function(){

			   	alert("正在启动webQQ,请稍候...");

			   }

           }),

		   '-',

		   	new Ext.Toolbar.Button({

	           text: '更改密码',

			   handler: function(){

			   	alert("你没有权限更改密码.");

			   }

           }),

		   '-',

		   new Ext.Toolbar.Button({

	           text: '注销',

			   handler: function(){

			   		window.location='ask123_logout';

			   }

           }),

		   '-',

                  //...调用控件对象就可以了，easy吧？

		   new Ext.ux.ThemeCycleButton

        );