16

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

user244394
  • 13,168
  • 24
  • 81
  • 138

2 Answers2

7

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.

Brian
  • 476
  • 1
  • 5
  • 14
  • 2
    I ended up using this http://www.sencha.com/forum/showthread.php?80263-Change-Global-themes – user244394 Feb 03 '12 at 19:48
  • Hey Brian. I too face the same issue. I see some scrollbars in the screen when I change theme dynamically. How did you overcome this problem? – Gugan Aug 08 '14 at 06:47
4

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.

Anthony
  • 644
  • 7
  • 23
Gugan
  • 1,625
  • 2
  • 27
  • 65
  • Question regarding Point 2. and Point 3.: Do i write these statements into the app.js file or somehere else? – kiltek May 19 '15 at 13:19
  • @kiltek If you use a button to switch between themes, you can write those statements inside the button handler. – Gugan Jun 15 '15 at 10:27