PDA

View Full Version : Switch theme dinamically at runtime in ExtJs 4.2



quamat
11 Apr 2013, 12:47 AM
Hi, I want to change the theme (CSS, images, JS overrides) dinamically in a Ext 4.2 application.
What is the best way to do this?
Thanks

slemmon
12 Apr 2013, 3:35 PM
You might look at the source for this example. It has a theme picker at the top of the page.
http://docs.sencha.com/ext-js/4-2/extjs-build/examples/grid/xml-grid.html

quamat
15 Apr 2013, 12:47 AM
The theme picker inserts one of the standard css included in the ExtJs library.
In my app I have my custom components and custom scss.
I also created some custom themes in the package directory of my app.

I now managed to build a version of the app for each theme in a different folder, so I can have different css to switch to.
The problem is that the build process is very long: I have to manually change the theme in the sencha.cfg, and refresh and build everything for each theme everytime.
Moreover, the project is getting too big: I have a lot of files to manage because I have a lot of builds.

Is there a simpler way to do this?

slemmon
15 Apr 2013, 1:00 PM
Perhaps. I've created multiple stylesheets for an app before and then used swapStyleSheet (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.util.CSS-method-swapStyleSheet) to change out the style sheets at runtime.