Ext.js Style - Ext JS

How to style the applications using ExtJ Style?

Application Styling is used for adjusting the look and feel of components and these adjustments may include: color, color gradients, font, margins/padding, etc. Ext JS 6 is a new way to style the application.

SCSS is the more dynamic way of writing CSS code and is used for styling. Variables can be written in the style sheet with the help of SCSS. Browser cannot understand SCSS and it can only understand CSS, therefore all the SCSS file should get compiled into CSS to a production ready code.

This is the reason why SCSS file is called pre-processor files. In Extjs compilation is done through Sencha CMD tool.

Sencha CMD compiles it manually only once using a command as below:

sencha app build [development]

Global_CSS is the main CSS file which has all SCSS variables associated with it in ExtJS which we can use in the application to customize a theme by providing different values as per the requirement.

Below are some of the CSS variables available in Global_CSS in Extjs:

S.N.

Variable & Description

1

$base-color

$base-color : color (e.g. $base-color : #808080)

This base color can be used throughout the theme.

2

$base-gradient

$base-gradient : string (e.g. $base-gradient : 'matte')

base gradient can be used throughout the theme.

3

$body-background-color

$body-background-color : color (e.g. $body-background-color : #808080)

Background color is used for applying 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 is the default text color to be used throughout the theme

5

$font-family

$font-family : string (e.g. $font-family : arial)

This is the default font-family to be used throughout the theme.

6

$font-size

$font-size : number (e.g. $font-size : 9px )

This is the default font-size to be used throughout the theme.

7

$font-weight

$font-weight : string/number (e.g. $font-weight : normal )

This is the default font-weight to be used throughout the theme

8

$font-weight-bold

$font-weight-bold : string/number (e.g. $font-weight-bold : bold )

This is the default font-weight for bold font to be used throughout the theme

9

$include-chrome

$include-chrome : boolean (e.g. $include-chrome : true)

This is set to True for including Chrome specific rules

10

$include-ff

$include-ff : boolean (e.g. $include-ff : true)

This is set toTrue for including Firefox specific rules

11

$include-ie

$include-ie : boolean (e.g. $include-ie : true)

This is set to True for including Internet Explorer specific rules for IE9 and lower

12

$include-opera

$include-opera : boolean (e.g. $include-opera : true)

This is set to True for including Opera specific rules

13

$include-safari

$include-safari : boolean (e.g. $include-safari : true)

This is set to True for including Opera specific rules

14

$include-webkit

$include-webkit : boolean (e.g. $include-webkit : true)

This is set to True for including Webkit specific rules

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Ext JS Topics