View Full Version : How to change Theme for subapplication sharing same app structure.

Janhvi Verma
28 Feb 2017, 7:36 AM
I have an application Which has dashboard and dashboard has 4 sub app in it.
These subapp can have different skin color and different data. on click of any sub app will open with its own set of data. Currently app is having a same skin color. I want to change the app skin color/theme based on the subapp clicked.

I have followed below links and able to develop POC.

My problem is: My app is sharing a same structure for the all the sub app so how can i customize the theme for subapps?

Means all scss files are build before the app is app so on click of any subapp how can i have the skin color/theme changed?

It will be really a great help if someone put some ideas of doing it.

Thanks !!

2 Mar 2017, 4:53 AM
If I understand your requirement correctly, this is not supported by Sencha ExtJS, because of the way ExtJS theming works as a single-page application on top of the underlying CSS: Since the CSS classes are the same, the styles cannot be different without much manual labor.

You would have to merge the two themes by hand, and prepend every stylesheet rule of the subapp theme with a certain unique class name, which you then assign in your application to the container containing the sub application. I didn't count how many rules you would have to prepend, but it's in the thousands.

So if you want sub applications with a different skin, the easier solution is to build these sub applications as standalone ExtJS applications, and embed them into your main application as iframes. Please note that this has various limitations regarding information exchange between the main application and the sub applications, and if you have too many sub applications, this may consume more memory than available, since the framework is in memory more than once.

Janhvi Verma
3 Mar 2017, 5:46 AM
Thanks for the reply Alexander!