Ext.js Tutorial
Ext.js Useful Resources
Selected Reading
- Ext.js - Methods
- Ext.js - Debugging Code
- Ext.js - Accessibility
- Ext.js - Localization
- Ext.js - Drawing
- Ext.js - Style
- Ext.js - Fonts
- Ext.js - Data
- Ext.js - Custom Events and Listeners
- Ext.js - Themes
- Ext.js - Drag & Drop
- Ext.js - Components
- Ext.js - Layouts
- Ext.js - Containers
- Ext.js - Class System
- Ext.js - First Program
- Ext.js - Architecture
- Ext.js - Naming Convention
- Ext.js - Environment Setup
- Ext.js - Overview
- Ext.js - Home
Ext.js Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Ext.js - Style
Ext.js - Style
Apppcation Stypng 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 stypng the apppcation.
It uses SCSS for stypng. 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 apppcation 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. |