Create theme for Sencha ExtJS components and charts

Overview

Creating themes using CSS is awesome, but its complex syntax makes life difficult. As project grows and demands more and more styling consumes lot of time in organizing it perfectly.

To over come all these, as part of this article we will see how Sass and Compass will help in creating the themes easily and use it in your application.

Problem Statement

Most of the application needs an custom theme to give an unique look and feel for application, so in order to create an custom theme we will see following items as part of this article

• Tools required
• Installation of tools
• Understanding the files/folders structure for ExtJS theme
• Overriding styles for existing ExtJS components
• Defining ui and using on a component
• Theme for ExtJS charts

Pre-requisites

Following are the various tools required and find the respective links for installation

• Make sure that you have SenchaCmd-3.1.2 installed, for how you can refer link
• Sencha ExtJS app created with SenchaCmd  ( Sencha ExtJS SDK 4.2.X )
• Ruby,Gem installed, for how you can refere link
• Working knowledge of ExtJS

Details

Installation of tools

Step 1: Install compass on your machine

For linux :  Open the terminal and run following command, with super user permissions

gem install compass

After successful installation of compass you will see following message,

Successfully installed compass-0.12.2
Parsing documentation for compass-0.12.2
Done installing documentation for compass (3 sec).
1 gem installed

Step 2: Install CSS parser

To view the output statistics of your Sass stylesheet, let us install CSS parser.

One your terminal and type following command with super user permissions,

gem install css_parser

After succssful installation of css_parser you will see following message,

Fetching: addressable-2.3.4.gem (100%)
Successfully installed addressable-2.3.4
Fetching: css_parser-1.3.4.gem (100%)
Successfully installed css_parser-1.3.4
Parsing documentation for addressable-2.3.4
Installing ri documentation for addressable-2.3.4
Parsing documentation for css_parser-1.3.4
Installing ri documentation for css_parser-1.3.4
Done installing documentation for addressable, css_parser (2 sec).
2 gems installed

Step 3: You should have Sencha ExtJS sample app created with Sencha Cmd, if no execute the following command to create Sencha ExtJS app

• Open the terminal and execute the following command

sencha -sdk <path to sencha ExtJS sdk> generate app <app-name> ./<app-name>

Above command will create an sample ExtJS application, move this app to web server to access through browser, which will show the following view

Understanding the files/folders structure for ExtJS theme

To create an new custom theme, navigate to your project  and generate theme easily using Sencha CMD as below

sencha generate theme <theme-name> 

Ex: sencha generate theme wtc

Above command generate the following files and folders under <project-dir>/packages/ directory

Step 2: Open the terminal and navigate to project directory and run the following command,

sencha app build

Now refresh the browser you will see the following changes

Defining ui and using on a component

In order to give an different and unique appearance for components ExtJS provides the feature to configure component specific ui by default every component has default ui.

Example : Let us consider that in your application you want to identify the panels based on the modules, so you can create an module specific ui and use it for respective panels.

In this article you will see how we can create our own custom ui for ExtJS panel and use it with component.

Step 1: To create an ui for Panel component, create following directories and files,

Directory :

<project-directory>/packages/wtc/sass/src/panel

File:

<project-directory>/packages/wtc/sass/src/panel/Panel.scss

Step 2: Now you need to override the your custom values for panel ui in Panel.scss, for this ExtJS provides extjs-panel-ui mixin

Copy following content to Panel.scss file for extjs-panel-ui mixin,

For your mixin you need provide an label which will be used later with component using $ui-label property. Also as part of this article you will see the basic property changes for the panel which as shown below, if you need more customization you can change respective properties in mixin

$ui-border-color, $ui-header-color, $ui-header-background-color, $ui-body-background-color.

Step 3: Now  open the terminal and navigate up to project directory and execute following command which will build your app and picks up the custom ui changes you made

sencha app build

If this command executes successfully then you are done with custom ui for ExtJS panel component

Step 4: Now use your custom ui i.e. wtcpanel with panel component as below

Add one more panel to the view Main.js  as shown below

Now refresh the browser you will see the new panel which you added above

But if you see in above image you will not see the custom ui changes for any of the panel. Now in order to use wtcpanel ui with your panel you need to add property ui to your panel as shown below

Now refresh the browser you will see the following output

Theme for ExtJS Charts

Always default theme will not be sufficient for ExtJS charts, so will might want to change the theme , colors for charts in ExtJS.

ExtJS currently supports seven default themes which are : Base, Green, Sky, Red, Purple, Blue and Yellow.

As part of this article you will see how we can create custom themes for ExtJS charts. Follow below steps for this

Step 1: First up all create an sample pie chart using following code, copy paste below code in view  Main.js

Refresh the browser you will see following result

Step 2: Now let us override the base theme for charts and create an custom theme for charts,

As part of this article we will cover how to override the base colors with custom colors and use them with above pie chart example.

Follwoing code overrides the Ext.chart.theme.Base and overrides the default colors. Copy following code and past at the end of view Main.js

Now replace the theme property value from Base:gradients to WtcChartTheme  in code shown in step 1, now refresh the browser you will see the pie chart colors are changed with custom colors.

Similarly we can override the different properties of default theme like

•  font style , fill color for axisTitle for line , Bar charts
• Series theme for Bar,Pie charts
• marker themes for Radar,Line etc

Conclusion

In this article we saw that how we provide the custom look and feel for the application using Sass and Sencha Cmd. We covered file structure for ExtJS theme, creating custom themes and using with ExtJS application, how to override the default styles for components , definging custom ui and using it with components and custom theme for charts etc.

References

http://docs.sencha.com/extjs/4.2.1/#!/guide/theming

http://www.sencha.com/learn/drawing-and-charting/