In order to use the ExtJS Frontend Framework properly, you will need to use the folder structure, as described by Sencha in the Theming Section of their API documentation. CoreMedia provides a blank blueprint-studio-theme module, which extends the Studio Theme and should be used to define own skins and customize existing ones. Skins are written in a particular SASS dialect, compiled by Sencha CMD, which offers most SCSS functionalities enriched by certain Sencha functions.

Figure 7.5. Theming Inheritance in ExtJS and CoreMedia

The Studio Theme is responsible for the default appearance of CoreMedia Studio. It extends the Triton Theme, provided by the ExtJS Framework and offers certain variables and SCSS mixins. You can easily disable style rules, defined in the Studio Theme by setting the include variables for skins or custom components to false.

Note

The Studio Theme introduces many variables that are also used outside the theme in SCSS files for custom styling of particular components. CoreMedia recommends not changing the theming inheritance and extend from another theme than the Studio Theme, because those variables would not be initialized anymore. Also, all skins, introduced by the Studio Theme, would not be available, since the corresponding style rules would not be created anymore. The better way would be to still inherit from the Studio Theme, but disable undesired styles by setting the include variables to false.

In every ExtJS Workspace, there are different folders for SCSS files:

The Studio Theme slightly differs from this structure by introducing a forth folder:

These additional mixins enhance the ExtJS Framework and broaden the possibilities to style certain components. They are introduced in the Studio Theme and work as extensions of the Sencha SCSS mixins, as explained in Section 7.13.2, “Studio Styling with Skins”. You can - and should - use them when creating new skins in the blueprint-studio-theme. The include order of SCSS files from different folders is described in Organization of Generated Styles in the Sencha ExtJS API documentation.

The directory, in which Sencha CMD searches for SCSS files in the CoreMedia Workspace slightly differs from the path described in the Sencha API documentation. SCSS files belong into the sencha/sass/src/Ext/component/ directory of the blueprint-studio-theme to make sure they will be found by Sencha CMD. By adjusting the folder structure, the ExtJS Microloader also finds custom components in com.coremedia packages.

After adding or changing files in the blueprint-studio-theme, you will need to build your app and run Sencha CMD. You can simply do that by running Maven. You don't need to worry about Sencha CMD, since it will automatically be triggered by Maven:

mvn clean install -pl :studio-base-app,:blueprint-studio-theme

Instead of running Maven, you can also rebuild the changed files in your project (Make Project in IDEA). Afterwards, Sencha CMD has to be triggered to build the studio-app again. Make sure to run this command in the target/app/ folder of the studio-base-app module:

sencha app build --development

You can specify a certain language, such as English, by adding --locale=en to build your app even faster. See the localization section of the ExtJS Guide for further information about localization in ExtJS.

It is also possible to let Sencha CMD watch the studio-base-app for changes:

sencha app watch