轉自http://www.wenhaozhong.com/27.html

這里基于 Extjs4.2（發文時官方剛發布了最新版5.0） 進行開發的，更換主題后，主題信息保存在本地 cookie 中，如果要保存在數據庫中，請自行修改！

由于我采用的是Sencha Architect3 可視化開發工具 ，前臺代碼采用官方推薦的mvc模式，

首先，我新建了個Combobox 讓用戶選擇主題

?

model代碼如下：

?Ext.define('Kl.model.sys.Theme', {

??? extend: 'Ext.data.Model',

??? requires: [

??????? 'Ext.data.Field'

??? ],

??? fields: [

??????? {

??????????? name: 'name'

??????? },

??????? {

??????????? name: 'id'

??????? }

??? ]

});

view 代碼如下：

?{

??????????????????????????? xtype: 'combobox',

??????????????????????????? itemId: 'mycombobox1',

??????????????????????????? padding: 0,

??????????????????????????? fieldLabel: '皮膚更換??????????? ',

??????????????????????????? labelAlign: 'right',

??????????????????????????? labelPad: 1,

??????????????????????????? labelWidth: 65,

??????????????????????????? name: 'theme',

??????????????????????????? value: 'ext-all.css',

??????????????????????????? displayField: 'name',

??????????????????????????? forceSelection: true,

??????????????????????????? queryMode: 'local',

??????????????????????????? store: 'sys.Theme',

??????????????????????????? typeAhead: true,

??????????????????????????? valueField: 'id',

??????????????????????????? listeners: {

??????????????????????????????? change: { //改變選擇時觸發事件

??????????????????????????????????? fn: me.onMycomboboxChange11,

??????????????????????????????????? scope: me

??????????????????????????????? },

??????????????????????????????? afterrender: {//初始化數據

??????????????????????????????????? fn: me.onMycomboboxAfterRender11,

??????????????????????????????????? scope: me

??????????????????????????????? }

??????????????????????????? }

??????????????????????? }

在combobox中的store 保存了主題css文件的路徑

Store 代碼如下：

?Ext.define('Kl.store.sys.Theme', {

??? extend: 'Ext.data.Store',

?

??? requires: [

??????? 'Kl.model.sys.Theme',

??????? 'Ext.data.proxy.Ajax',

??????? 'Ext.data.reader.Array'

??? ],

?

??? constructor: function(cfg) {

??????? var me = this;

??????? cfg = cfg || {};

??????? me.callParent([Ext.apply({

??????????? model: 'Kl.model.sys.Theme',

??????????? storeId: 'sys.Theme',

??????????? data: [

??????????????? {

??????????????????? name: '經典懷舊',

??????????????????? id: 'ext-all.css'

??????????????? },

??????????????? {

??????????????????? name: '鋼鐵世界',

??????????????????? id: 'ext-all-gray.css'

??????????????? },

??????????????? {

??????????????????? name: '粉紅女郎',

??????????????????? id: 'ext-all-red.css'

??????????????? }

??????????? ],

??????????? proxy: {

??????????????? type: 'ajax',

??????????????? reader: {

??????????????????? type: 'array'

??????????????? }

??????????? }

??????? }, cfg)]);

??? }

});

由于采用基本的事件處理就可以搞定，所以就沒有寫 控制器 control

事件處理代碼如下： 采用 Ext.util.CSS.swapStyleSheet() 方法設置主題。

?? onMycomboboxChange11: function(field, newValue, oldValue, eOpts) {

??????? if(newValue!=oldValue){

??????????? Ext.util.CSS.swapStyleSheet('theme', '../../extjs4.2/resources/css/'+newValue);

??????????? var cp = new Ext.state.CookieProvider();

??????????? Ext.state.Manager.setProvider(cp);

??????????? cp.set("themes",newValue);

??????? }

??? },

??? onMycomboboxAfterRender11: function(component, eOpts) {

??????? var cp = new Ext.state.CookieProvider();

??????? Ext.state.Manager.setProvider(cp);

??????? //cp.set("themes",data.username);

??????? var themes = cp.get("themes");

??????? if(themes){

??????????? component.setValue(themes);

??????????? Ext.util.CSS.swapStyleSheet('theme', '../../extjs4.2/resources/css/'+themes);

??????? }

??? }

小伙伴們，你搞定了嗎？ 附上效果圖：

其他參考鏈接

extjs4.2更換主題

轉載于:https://www.cnblogs.com/Joetao/articles/4657428.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Extjs 更换主题（转载）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。