Good afternoon, in this article I will talk about the main nuances of creating themes for your applications on ExtJS 6. This article assumes that you already have experience with ExtJS. The modern toolkit will be used as an example, there are no special differences for the classic toolkit . This article addresses the following questions:

• 1. Inheritance and topic creation
• 2. Approaches to design creation
• 3. Application UI mixins

Welcome under cat.

Introduction: Creating a Test Application

In order to generate our test application using only the modern toolkit , we use the command:

sencha -sdk "\path\to\framework" generate app -modern TestApp "\path\to\application" 

')

1. Inheritance and topic creation

When creating your theme, ExtJS allows you to inherit from any existing theme. You must immediately decide that you need to implement some things yourself from scratch, or take a piece of design from another topic. Currently, there are 8 different themes in the latest available version of ExtJS 6.0.1 (in the modern toolkit ). The hierarchy between them is as follows.


For classic toolkit, there are 8 main themes (there are also events modified for touch, for example theme-neptune-touch, they are not indicated in the diagram).


In order to look at how this or that topic suits you, you can set it in app.json and see it using the sencha app watch. It should also be remembered that in some themes styles may not be implemented for individual controls (for example, theme-mountainview does not implement tooglefield), so look and evaluate the parent carefully.

To create your theme, where theme-triton theme will act as a parent, use the command:

 sencha generate theme --extend theme-triton my-test-theme 

After that, your my-test-theme will be located in the “packages / local /” folder. Consider the theme folder structure:

package.json - The main file describing the theme, there are all the properties of the theme: the parent, name, version and its dependencies.
sass - This folder contains only sass files, inside it you will see the following folders: var for creating variables, src for creating mixins, etc for creating custom mixins and additional functionality.
resources - Only static resources, such as images and css, should be stored in this folder.
overrides - js files are stored in this folder to create additional functionality for existing controls.

2. Approaches to design creation

After creating your theme, you can choose exactly how you will implement the design. There are two ways to create a design: correct and there is no reception against the scrap, and not very much:

• Style overrides - assumes that you will override the ExtJS styles in your css files (using! Important). This method can be used if you do not want to communicate with sass, and the project is not very large. The negative side of this method is to create redundant css code.
• UI mixins - true way, allows you to implement an arbitrary style for each control, without consequences for it. The standard ExtJS mechanism requires an understanding of sass.

3. Application UI mixins

After creating a theme, it is recommended to set global variables for sass, this will greatly facilitate your life in the future. A list of variables can be found here . To set global variables you need to create the “packages / local / my-test-theme / sass / var / Component.scss” file and indicate there, for example:

 $base-color : #317040; 

After that you can see the result (before and after).


It is strongly recommended to set $ base-color, and work only with it, vary colors using mixins (sass functions). Almost every control in ExtJS has its own CSS mixins. Consider the use of mixins on Button. To do this, create the file “my-test-theme / sass / src / Button.scss” with the following content:

 @include button-ui( $ui: 'lighten', $ui-button-color: lighten($base-color,20) //   20%   ); @include button-ui( $ui: 'darken', $ui-button-color: darken($base-color,20) //   20%   ); 

Now we can add buttons with the UI mixin we need.

  { xtype: 'button', ui: 'lighten', text: 'lighten button' },{ xtype: 'button', ui: 'darken', text: 'darken button' }, { xtype: 'button', text: 'original button' } 

The result will be as follows:



Thus, using UI mixins, you can decorate any control with impunity.