View Full Version : Change Extjs Theme for particular region of viewport.

9 Dec 2013, 2:56 AM

I have a viewport that having all 5 region and i have a combo box in center region for switching themes.

Now is it possible to change theme only for center panel on theme change ?.


Any help will be appreciated.

9 Dec 2013, 1:46 PM
The short answer, if you're using the default ExtJS themes, is no. The way the themes are set up, with some themes like Neptune requiring Javascript overrides, means that you can really only have one theme per page - and to switch the theme, you need to reload the page. (This is how the Sencha examples like this one (http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/layout/border.html) implement the theme switcher.)

There is an alternative, however: if you implement your own theme, rather than using one of the pre-built ones, you should be able to achieve a similar effect by creating custom component UIs (http://docs.sencha.com/extjs/4.2.2/#!/guide/theming-section-creating-custom-component-uis) for the center panel, and then switch between them by using Ext.panel.Panel.setUI() (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.panel.Panel-method-setUI).

10 Dec 2013, 3:54 AM
Hi burnnat,Thanks for your reply.I wants to switch theme without loading page and only for center region. For example - If i selected "Grey" from combo box then "center region" look accordingly. Thanks

10 Dec 2013, 5:20 AM
As I said before, the way you're trying to go about this is impossible for two reasons:

Themes always apply to the entire page content, not specific components.
Switching themes in some cases requires a page reload to reset javascript overrides.

There's no easy way around these facts - it's just not going to work.

However, you can achieve the same effect by using a single "master" theme with multiple component UIs that you switch between using the setUI() method. Although this requires you to create a custom theme, it satisfies both of your main requirements that (1) only the styling of the center panel be changed and (2) no page reload is required. The information in the links I posted earlier will help you with this.