Extjs 更换主题

最新推荐文章于 2017-09-25 11:30:54 发布

weixin_34044273

最新推荐文章于 2017-09-25 11:30:54 发布

阅读量161

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/zhongwenhao/blog/351276

2019独角兽企业重金招聘Python工程师标准>>>

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

使用一个Combobox 让用户选择皮肤！

{
                            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
                                }
                            }
                        }

事件处理代码如下：采用 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);
        }
    }

附上效果图：

参考文章：

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

转载于:https://my.oschina.net/zhongwenhao/blog/351276