Theming in Extjs (Part 1)

Theming an Extjs Application with SASS and Compass

It's break, so I decided to play around with Extjs :).

I wanted to look at theming an application using SASS and Compass.

It took me awhile to realize that the correct documentation for doing so on Sencha CMD 3.1 and Extjs 4.2 was here: http://docs.sencha.com/extjs/4.2.1/#!/guide/theming. (For some reason they didn't make finding this doc easy...)

Here's Part 1 of a summary of that tutorial...

Setup:

Generate a workspace for your theme generation

sencha -sdk ~/ext-4.2.0 generate workspace my-workspace

Make a test app to see your theme when you modify it

sencha -sdk ext generate app ThemeDemoApp theme-demo

Then, build the app, and generate a new theme with

sencha generate theme my-custom-theme

Then, this summary gives a good overview of what goes where:

• "package.json" - This is the package properties file. It tells Sencha Cmd certain things about the package like its name, version, and dependencies (other packages that it requires).
• "sass/" - This directory contains all of your theme's SASS files. The sass files are divided into 3 main sections:
  1. "sass/var/" - contains SASS variables
  2. "sass/src/" - contains SASS rules and UI mixin calls that can use the variables defined in "sass/var/"
  3. "sass/etc/" - contains additional utility functions or mixins The files in "sass/var/" and "sass/src" should be structured to match the class path of the Component you are styling. For example, variables that change the appearance of Ext.panel.Panel should be placed in a file named"sass/var/panel/Panel.scss".
• "resources/" - contains images and other static resources that your theme requires.
• "overrides/" - contains any JavaScript overrides to Ext JS Component classes that may be required for theming those Components.

First thing you want to do is inherit from the correct theme.

Go to the package.json file, and modify the "extend" tag to the one you want. For example: 

"extend": "ext-theme-classic"

Now you need to refresh the application.

Do this from the "theme-demo-app" directory. Also use the .sencha/app/sencha.cfg to change the theme to your custom theme.

sencha app refresh

Start playing around:

Now, for play. One of the big advertising points of Sencha was the ability to easily change color schemes of the whole application. Let's try it. Create Component.scss under /my-custom-theme/sass/var/ with the following.

$base-color: #317040 !default;

Then, they say:

Be sure to include !default at the end of all variable assignments if you want your custom theme to be extensible. Without !default you will not be able to override the variable in a derived theme, because Sencha Cmd includes variable files in "reverse" order - most-derived theme first, base theme last. For more information on the use of !default see Variable Defaults

base-color is one of many global css variables. The rest are listed here Global_CSS.

Generate the CSS:

Now, to generate the CSS, go to my-custom-theme and 

sencha package build

Then, inside "my-custom-theme/build/resources" a file my-custom-theme-all.css is generated.

Then, 

If you have already run a build of the app using the classic theme, you should clean the build directory. From the theme-demo-app directory run:

sencha ant clean

This is a step that could be easily forgotten!

Finally, go back to your test application and perform a 

sencha app build

You should see the green theme!

That's all for this post; happy theming!