首页 > 代码库 > Extjs 更换主题
Extjs 更换主题
这里基于 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
Extjs 更换主题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。