Ext主题更换并将结果存到Cookie中

其实很简单，Ext为我们提供了更换主题的方法

 

Ext.util.CSS.swapStyleSheet("theme","主题路径");

例用这个我们就能更换Ext主题了，为了操作方便，我们还要有个可操作的东东。看了一个国外的EXT站点，用的是一个CombBox。查 看了他的源码。发现他并没有做Cookie处理。这里我们可以加进去。由于自己对Jquery熟悉一点。而且Jquery有一个Cookie插件。这里有用jquery了。代码如下：

 

Ext.ns('Ext.ux.form'); Ext.ux.form.ThemeCombo = Ext.extend(Ext.form.ComboBox, { // configurables themeBlueText: 'Ext Blue Theme' , themeGrayText: 'Gray Theme' , themeBlackText: 'Black Theme' , themeOliveText: 'Olive Theme' , themePurpleText: 'Purple Theme' , themeDarkGrayText: 'Dark Gray Theme' , themeSlateText: 'Slate Theme' , themeVistaText: 'Vista Theme' , themePeppermintText: 'Peppermint Theme' , themePinkText: 'Pink Theme' , themeChocolateText: 'Chocolate Theme' , themeGreenText: 'Green Theme' , themeIndigoText: 'Indigo Theme' , themeMidnightText: 'Midnight Theme' , themeSilverCherryText: 'Silver Cherry Theme' , themeSlicknessText: 'Slickness Theme' , themeVar: 'theme' , selectThemeText: 'Select Theme' , themeGrayExtndText: 'Gray-Extended Theme' , themeCalistaText: 'Calista' , lazyRender: true , lazyInit: true , cssPath: 'js/ext-2.2.1/resources/css/' // mind the trailing slash // {​{​{ , initComponent: function() { var config = { store: new Ext.data.SimpleStore({ fields: ['themeFile', { name: 'themeName', type: 'string'}] , data: [ ['xtheme-default.css', this.themeBlueText] , ['xtheme-gray.css', this.themeGrayText] , ['xtheme-darkgray.css', this.themeDarkGrayText] , ['xtheme-black.css', this.themeBlackText] , ['xtheme-olive.css', this.themeOliveText] , ['xtheme-purple.css', this.themePurpleText] , ['xtheme-slate.css', this.themeSlateText] , ['xtheme-peppermint.css', this.themePeppermintText] , ['xtheme-chocolate.css', this.themeChocolateText] , ['xtheme-green.css', this.themeGreenText] , ['xtheme-indigo.css', this.themeIndigoText] , ['xtheme-midnight.css', this.themeMidnightText] , ['xtheme-silverCherry.css', this.themeSilverCherryText] , ['xtheme-slickness.css', this.themeSlicknessText] , ['xtheme-gray-extend.css', this.themeGrayExtndText] , ['xtheme-pink.css', this.themePinkText] , ['xtheme-calista.css', this.themeCalistaText] ] }) , valueField: 'themeFile' , displayField: 'themeName' , triggerAction: 'all' , mode: 'local' , forceSelection: true , editable: false , fieldLabel: this.selectThemeText }; // eo config object // apply config Ext.apply(this, Ext.apply(this.initialConfig, config)); //this.store.sort('themeName'); // call parent Ext.ux.form.ThemeCombo.superclass.initComponent.apply(this, arguments); // if (false !== this.stateful && Ext.state.Manager.getProvider()) { // this.setValue(Ext.state.Manager.get(this.themeVar) || 'xtheme-default.css'); // } // else { // this.setValue('xtheme-default.css'); // } } // end of function initComponent // }}} // {​{​{ , setValue: function(val) { Ext.ux.form.ThemeCombo.superclass.setValue.apply(this, arguments); // set theme Ext.util.CSS.swapStyleSheet(this.themeVar, this.cssPath + val); $.cookie('ext_theme', val); //将主题的CSS文件名存到Cookie中 if (false !== this.stateful && Ext.state.Manager.getProvider()) { Ext.state.Manager.set(this.themeVar, val); } } // eo function setValue // }}} , listeners: { render: function(combo) { // this.fireEvent('select', this, record.get("vehicleType"), 2); // this.select(this, record.get("vehicleType")); if (null != $.cookie('ext_theme')) this.setValue($.cookie('ext_theme')); //组件一绑定后，加载Cookie中的CSS。 } } }); Ext.reg('themecombo', Ext.ux.form.ThemeCombo); //这里将我们的组件注册为themecombo

 

在HTML文件中写上

<div id='theme-combo'></div>

然后执行

Ext.onReady(function() { themeCombo = new Ext.ux.form.ThemeCombo({ id: 'theme-combo', width: 203, renderTo: 'themect' }); });

 

大功告成！