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 something else.

Thanks

Answer 1

Ext.util.CSS.swapStyleSheet function can be used to switch between the different themes, this forums post shows an example.

Also I implemented this at first in my app a while back, but I ultimately found that forcing a browser refresh was necessary instead of dynamically swapping the CSS as there would still be some weird sizing/positioning issues. This was mainly when switching between the accessibility theme.

Answer 2

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.

   <link rel="stylesheet" id="theme1" type="text/css" href="../Theme1.css" />
   <link rel="stylesheet" id="theme2" type="text/css" href="../Theme2.css" />
   

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.