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

由于采用基本的事件处理就可以搞定，所以就没有写 控制器 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更换主题