O'Reilly logo

Learning Ext JS - Fourth Edition by Armando Gonzalez, Crysfel Villa, Carlos A. Méndez

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Advanced theming

In this section, we will cover some common situations where we need to modify the original theme (the extended theme). This is frequently used for branding or visual purposes.

Changing the component's style

For this example, we are going to change the style of the Ext.toolbar.Toolbar component, so let's go to the ext/packages/my-custom-theme/sass/var/ folder and create a folder called toolbar. Inside this folder, create a file named Toolbar.scss and place the following code in it:

$toolbar-background-color: rgba(188,188,188,1);
$toolbar-background-gradient: recessed;

Save the file. Now, in your console tool, go to the ext/packages/my-custom-theme/ folder and compile your theme:

sencha package build

Next, let's refresh our app, open ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required