本文地址：[http://blog.csdn.net/sushengmiyan/article/details/42016107](http://blog.csdn.net/sushengmiyan/article/details/42016107) 本文作者：[sushengmiyan](http://blog.csdn.net/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/](http://extjs.eu/lightweight-theming/) 推薦一下，這個網站，內容比較充實，界面也比較好看。就是有些插件需要花錢購買。