Extjs 更换主题（转载）

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

这里基于 Extjs4.2（发文时官方刚发布了最新版5.0） 进行开发的，更换主题后，主题信息保存在本地 cookie 中，如果要保存在数据库中，请自行修改！

由于我采用的是Sencha Architect3 可视化开发工具 ，前台代码采用官方推荐的mvc模式，

首先，我新建了个Combobox 让用户选择主题

 

model代码如下：

1.  Ext.define('Kl.model.sys.Theme', {
2.     extend: 'Ext.data.Model',
3.     requires: [
4.         'Ext.data.Field'
5.     ],
6.     fields: [
7.         {
8.             name: 'name'
9.         },
10.         {
11.             name: 'id'
12.         }
13.     ]
14. });

view 代码如下：

1.  {
2.                             xtype: 'combobox',
3.                             itemId: 'mycombobox1',
4.                             padding: 0,
5.                             fieldLabel: '皮肤更换            ',
6.                             labelAlign: 'right',
7.                             labelPad: 1,
8.                             labelWidth: 65,
9.                             name: 'theme',
10.                             value: 'ext-all.css',
11.                             displayField: 'name',
12.                             forceSelection: true,
13.                             queryMode: 'local',
14.                             store: 'sys.Theme',
15.                             typeAhead: true,
16.                             valueField: 'id',
17.                             listeners: {
18.                                 change: { //改变选择时触发事件
19.                                     fn: me.onMycomboboxChange11,
20.                                     scope: me
21.                                 },
22.                                 afterrender: {//初始化数据
23.                                     fn: me.onMycomboboxAfterRender11,
24.                                     scope: me
25.                                 }
26.                             }
27.                         }

在combobox中的store 保存了主题css文件的路径

Store 代码如下：

1.  Ext.define('Kl.store.sys.Theme', {
2.     extend: 'Ext.data.Store',
3.  
4.     requires: [
5.         'Kl.model.sys.Theme',
6.         'Ext.data.proxy.Ajax',
7.         'Ext.data.reader.Array'
8.     ],
9.  
10.     constructor: function(cfg) {
11.         var me = this;
12.         cfg = cfg || {};
13.         me.callParent([Ext.apply({
14.             model: 'Kl.model.sys.Theme',
15.             storeId: 'sys.Theme',
16.             data: [
17.                 {
18.                     name: '经典怀旧',
19.                     id: 'ext-all.css'
20.                 },
21.                 {
22.                     name: '钢铁世界',
23.                     id: 'ext-all-gray.css'
24.                 },
25.                 {
26.                     name: '粉红女郎',
27.                     id: 'ext-all-red.css'
28.                 }
29.             ],
30.             proxy: {
31.                 type: 'ajax',
32.                 reader: {
33.                     type: 'array'
34.                 }
35.             }
36.         }, cfg)]);
37.     }
38. });

由于采用基本的事件处理就可以搞定，所以就没有写 控制器 control

事件处理代码如下： 采用 Ext.util.CSS.swapStyleSheet() 方法设置主题。

1.    onMycomboboxChange11: function(field, newValue, oldValue, eOpts) {
2.         if(newValue!=oldValue){
3.             Ext.util.CSS.swapStyleSheet('theme', '../../extjs4.2/resources/css/'+newValue);
4.             var cp = new Ext.state.CookieProvider();
5.             Ext.state.Manager.setProvider(cp);
6.             cp.set("themes",newValue);
7.         }
8.     },
9.     onMycomboboxAfterRender11: function(component, eOpts) {
10.         var cp = new Ext.state.CookieProvider();
11.         Ext.state.Manager.setProvider(cp);
12.         //cp.set("themes",data.username);
13.         var themes = cp.get("themes");
14.         if(themes){
15.             component.setValue(themes);
16.             Ext.util.CSS.swapStyleSheet('theme', '../../extjs4.2/resources/css/'+themes);
17.         }
18.     }

小伙伴们，你搞定了吗？ 附上效果图：

其他参考链接

extjs4.2更换主题