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.

This meant among other aspects, we needed to ensure that css from multiple ExtJs versions can co-exist cordially on the same page with ExtJs 6 without over-running each other’s styles. ExtJs itself since version 4 has supported the concept of sand-boxing, meaning you load independent ExtJS versions into their own separate sandboxes on a page (more on sand-boxing in a follow-up blog post). It even ships sandbox builds of its javascript files together with regular un-sandboxed builds.

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 x- to x6-. The sandbox build of ExtJs 6 javascript uses 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:

1. Create a Sencha command workspace. The following command should do it:
   
   sencha -sdk "C:\wamp\www\extjs" generate workspace "C:\wamp\www\mythemes"

   1	sencha -sdk "C:\wamp\www\extjs" generate workspace "C:\wamp\www\mythemes"

   
   Replace ExtJs path and output path as appropriate.
2. Create your theme skeleton using Sencha Cmd. For the purpose of this post, we would be deriving our theme from theme-classic and naming it theme-classicsandbox.
   
   sencha generate package --extend=theme-classic --framework=ext --namespace=Ext --toolkit=classic --type=THEME theme-classicsandbox

   1	sencha generate package --extend=theme-classic --framework=ext --namespace=Ext --toolkit=classic --type=THEME theme-classicsandbox

3. Add an override for $prefix SASS variable. You can do this in sencha-themer-defaults.scss.
   
   $prefix: 'x6-';

   1	$prefix: 'x6-';

4. That’s about it. Compile your theme using:
   
   sencha package build

   1	sencha package build

   
   and you should have the output css files for you to use in your application in the build output folder.

We have uploaded the build output of the theme-classicsandbox here for reference:
http://download.imbibetech.com/examples/extjs/6/theme-classicsandbox.zip

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.