- Ext.js Tutorial
- Ext.js - Home
- Ext.js - Overview
- Ext.js - Environment Setup
- Ext.js - Naming Convention
- Ext.js - Architecture
- Ext.js - First Program
- Ext.js - Class System
- Ext.js - Containers
- Ext.js - Layouts
- Ext.js - Components
- Ext.js - Drag & Drop
- Ext.js - Themes
- Ext.js - Custom Events and Listeners
- Ext.js - Data
- Ext.js - Fonts
- Ext.js - Style
- Ext.js - Drawing
- Ext.js - Localization
- Ext.js - Accessibility
- Ext.js - Debugging Code
- Ext.js - Methods
- Ext.js Useful Resources
- Ext.js - Questions and Answers
- Ext.js - Quick Guide
- Ext.js - Useful Resources
- Ext.js - Discussion
Ext.js - Style
Application Styling refers to user adjustment of the look and feel of the components. These adjustments may include: color, color gradients, font, margins/padding, etc. Ext JS 6 has a new way of styling the application.
It uses SCSS for styling. SCSS is a more dynamic way of writing the CSS code. We can write the variables in our stylesheet with the help of this. However, a browser cannot understand SCSS. It can only understand CSS, hence all SCSS files should get compiled into CSS to a production-ready code.
Thus, SCSS file is called preprocessor files. In Ext.js, compilation is done through Sencha CMD tool. Sencha CMD compiles it manually only once using the following command.
sencha app build [development]
Global_CSS is the main CSS file, which has all SCSS variables associated with it in ExtJS that can be used in our application for customizing our theme by providing different value based on our need.
Following are some of the CSS variables available in the Global_CSS in Ext.js.
| Sr.No | Variable & Description |
|---|---|
| 1 | $base-color $base-color: color (e.g. $base-color : #808080) This base color is to be used throughout the theme. |
| 2 | $base-gradient $base-gradient: string (e.g. $base-gradient : 'matte') This base gradient is to be used throughout the theme. |
| 3 | $body-background-color $body-background-color: color (e.g. $body-background-color : #808080) Background color to apply to the body element. If set to transparent or 'none', no background-color style will be set on the body element. |
| 4 | $color $color : color (e.g. $color : #808080) This default text color is to be used throughout the theme. |
| 5 | $font-family $font-family : string (e.g. $font-family : arial) This default font-family is to be used throughout the theme. |
| 6 | $font-size $font-size : number (e.g. $font-size : 9px ) This default font-size is to be used throughout the theme. |
| 7 | $font-weight $font-weight : string/number (e.g. $font-weight : normal ) This default font-weight is to be used throughout the theme. |
| 8 | $font-weight-bold $font-weight-bold : string/number (e.g. $font-weight-bold : bold ) This default font-weight for bold font is to be used throughout the theme. |
| 9 | $include-chrome $include-chrome : boolean (e.g. $include-chrome : true) True to include Chrome specific rules. |
| 10 | $include-ff $include-ff : boolean (e.g. $include-ff : true) True to include Firefox specific rules. |
| 11 | $include-ie $include-ie : boolean (e.g. $include-ie : true) True to include Internet Explorer specific rules for IE9 and lower. |
| 12 | $include-opera $include-opera : boolean (e.g. $include-opera : true) True to include Opera specific rules. |
| 13 | $include-safari $include-safari : boolean (e.g. $include-safari : true) True to include Opera specific rules. |
| 14 | $include-webkit $include-webkit : boolean (e.g. $include-webkit : true) True to include Webkit specific rules. |