how to swtich extjs themes?

Question

I noticed that extjs comes with 3 to 4 default themes/skins . How can I select or swtich between the themes?

I want to change the blue to select the grey themes or s

Answer 1

Though Ext.util.CSS.swapStyleSheet will work, It has few drawbacks:

1. It takes more time to render the page with new CSS theme.
2. While switching between themes, your page will be out of any css for a while. That will make the page look bad (broken and plain).
3. Unnecessary scrollbars will appear on the screen.

I overcame these using JavaScript:

Here,

1. Include all the CSS files in your HTML file.

2. Disable all the themes except one you want as default.

   document.getElementById('theme1').disabled = true;
   document.getElementById('theme2').disabled = false;
   

   Now the page will be loaded with 'theme2'.

3. If you want to switch the theme. Do the opposite of the above...

   document.getElementById('theme1').disabled = false;
   document.getElementById('theme2').disabled = true;
   

In this way, the switching will be real fast. Since we have loaded all the css files initially. It will not ask the server for new theme every time.

It worked very well for me.