As we recently started planning for upgrading one of our large enterprise applications (a CRM for the Travel industry) to latest version of ExtJs 6 to make it future ready, an immediate challenge was to enable multiple versions of ExtJs to co-exist on the same page without interfering with each other’s functionality or user-interface. This was a complex application comprising of over 25+ modules (some loaded in iframes and some directly on the main application page), consisting of well over 100K lines of ExtJs code spanning ExtJs 3, 4, 5 and 6; which practically constrained upgrading the entire application whole-sale to ExtJs 6, but the same had to be done in parts module by module.
Unfortunately however, no sandbox builds of any themes are bundled out-of-the box. With our recent experience of building a brand new ExtJs theme, how difficult it could be to bundle an ExtJs theme into a sandbox we thought, and it wasn’t difficult indeed at all.
Because our application used the blue theme from ExtJs 3 (called the
classic theme in later versions), we decided to create a minimalist
theme-classic derived theme and override the
baseCSSPrefix property and change it from default
x6- itself as the default value for
baseCSSPrefix, however you are free to change it in both places if so desired.
Anyways, here are the steps for creating a sandbox version of an existing ExtJs theme:
- Create a Sencha command workspace. The following command should do it:
1sencha -sdk "C:\wamp\www\extjs" generate workspace "C:\wamp\www\mythemes"
Replace ExtJs path and output path as appropriate.
- Create your theme skeleton using Sencha Cmd. For the purpose of this post, we would be deriving our theme from
theme-classicand naming it
theme-classicsandbox.1sencha generate package --extend=theme-classic --framework=ext --namespace=Ext --toolkit=classic --type=THEME theme-classicsandbox
- Add an override for
$prefixSASS variable. You can do this in
- That’s about it. Compile your theme using:
1sencha package build
and you should have the output css files for you to use in your application in the
We have uploaded the build output of the
theme-classicsandbox here for reference:
Hopefully this post makes it easy for you to create sandbox build of any ExtJs theme yourself. If you would rather prefer to take help, please reach out to us via this Contact page and we would be happy to assist you with your ExtJs project. Also, don’t forget to check the awesome Catalog theme for ExtJs 6, which gives you to a vibrant and professional look for your Ext user interfaces.