This is based on the Extjs4.2 (official release of the latest version of the 5.0) for development, after the change of theme, the subject information is stored in the local cookie, if you want to save in the database, please modify it yourself!
Use a ComboBox to let users choose skins!
{xtype: ' ComboBox ', ItemId: ' Mycombobox1 ', padding:0, Fieldlabel: ' Skin replacement ', 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: {//Trigger event when changing selection Fn:me.onMycombobox Change11, scope:me}, AF Terrender: {//Initialize data Fn:me.onMycomboboxAfterRender11, Scope:me } } }
The event handling code is as follows: Set the theme using the Ext.util.CSS.swapStyleSheet () method.
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); } }
Attached:
Reference article:
Http://www.wenhaozhong.com/27.html
ExtJS changing Themes