[ExtJS5學習筆記]sencha ext js 5.1.0中動態更換皮膚主題

本文地址：http://blog.csdn.net/sushengmiyan/article/details/42016107

本文做者：sushengmiyan

------------------------------------------------------------------------------------------------------------------------------------

爲方便起見，使用sencha cmd建立一個工程，使用app build命令build工程，使用web start命令啓動服務。

好了，如今更改下main.js中的一點代碼，增長以下內容到panel中：

,{
        xtype: 'combo',
        width: '100',
		labelWidth: '40',
		fieldLabel: 'Theme',
		displayField: 'name',
		valueField: 'value',
		//labelStyle: 'cursor:move;',
		//margin: '5 5 5 5',
		queryMode: 'local',
		store: Ext.create('Ext.data.Store', {
			fields: ['value', 'name'],
			data : [
				{ value: 'neptune', name: 'Neptune主題' },
				{ value: 'neptune-touch', name: 'Neptune Touch主題' },
				{ value: 'crisp', name: 'Crisp主題' },
				{ value: 'crisp-touch', name: 'Crisp Touch主題' },
				{ value: 'classic', name: 'Classic主題' },
				{ value: 'gray', name: 'Gray主題' }
			]
		}),
		//value: theme,
		listeners: {
			select: function(combo) {
				var  theme = combo.getValue();
				var	href = 'ext/packages/ext-theme-'+theme+'/build/resources/ext-theme-'+theme+'-all.css';
				var	link = Ext.fly('theme');
			 
				if(!link) {
					link = Ext.getHead().appendChild({
						 tag:'link',
						 id:'theme',
						 rel:'stylesheet',
						 href:''
					});
				};
				link.set({href:Ext.String.format(href, theme)});
			}
		}
    }

main.js代碼應該以下所示：（完整內容）

/**
 * This class is the main view for the application. It is specified in app.js as the
 * "autoCreateViewport" property. That setting automatically applies the "viewport"
 * plugin to promote that instance of this class to the body element.
 *
 * TODO - Replace this content of this view to suite the needs of your application.
 */
Ext.define('oaSystem.view.main.Main', {
    extend: 'Ext.container.Container',
    requires: [
        'oaSystem.view.main.MainController',
        'oaSystem.view.main.MainModel'
    ],

    xtype: 'app-main',
    
    controller: 'main',
    viewModel: {
        type: 'main'
    },

    layout: {
        type: 'border'
    },

    items: [{
        xtype: 'panel',
        bind: {
            title: '{name}'
        },
        region: 'west',
        html: '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>',
        width: 250,
        split: true,
        tbar: [{
            text: 'Button',
            handler: 'onClickButton'
        },{
        xtype: 'combo',
        width: '100',
		labelWidth: '40',
		fieldLabel: 'Theme',
		displayField: 'name',
		valueField: 'value',
		//labelStyle: 'cursor:move;',
		//margin: '5 5 5 5',
		queryMode: 'local',
		store: Ext.create('Ext.data.Store', {
			fields: ['value', 'name'],
			data : [
				{ value: 'neptune', name: 'Neptune主題' },
				{ value: 'neptune-touch', name: 'Neptune Touch主題' },
				{ value: 'crisp', name: 'Crisp主題' },
				{ value: 'crisp-touch', name: 'Crisp Touch主題' },
				{ value: 'classic', name: 'Classic主題' },
				{ value: 'gray', name: 'Gray主題' }
			]
		}),
		//value: theme,
		listeners: {
			select: function(combo) {
				var  theme = combo.getValue();
				var	href = 'ext/packages/ext-theme-'+theme+'/build/resources/ext-theme-'+theme+'-all.css';
				var	link = Ext.fly('theme');
			 
				if(!link) {
					link = Ext.getHead().appendChild({
						 tag:'link',
						 id:'theme',
						 rel:'stylesheet',
						 href:''
					});
				};
				link.set({href:Ext.String.format(href, theme)});
			}
		}
    }]
    },{
        region: 'center',
        xtype: 'tabpanel',
        items:[{
            title: 'Tab 1',
            html: '<h2>Content appropriate for the current navigation.</h2>'
        }]
    }]
});

糾結了好久的問題終於釋懷了。以前看的都是使用swapstylesheet我一直麼有成功過。偶爾看的了這篇文章，以爲不錯，果然成功了。

http://extjs.eu/lightweight-theming/

推薦一下，這個網站，內容比較充實，界面也比較好看。就是有些插件須要花錢購買。