Detailed explanation of ExtJS custom theme (theme) style_Basic knowledge

This article is based on Ext JS version 4.2.1
Basics of UI components
Learning ExtJS is about learning the use of components. ExtJS4 reconstructs the framework, the most important of which is the formation of a component system with a clear structure and hierarchy. These components form the Ext control.
There are nearly 100 components in the component system of ExtJs4, and these components can be roughly divided into four major categories, namely container components, toolbar and menu bar components, form and element components, and other components.
theme
ExtJs4 introduces a new theme system, using Sass and Compass technology to provide standard theme templates. Through simple customization of theme templates, you can create a variety of colorful themes.

Overview of Sass and Compass
Sass
The Sass style sheet language is an extension of CSS, providing variables, inline rules, mixins, and selectors for CSS Inheritance and other features, in the latest Sass3, it is 100% compatible with CSS3, and the syntax files are also upgraded to SCSS (Sassy CSS). Every valid CSS3 file is also a valid SCSS file. This compatibility reduces the learning cost and developers can smoothly Transition from CSS to Sass development.
The Sass style sheet language provides programming capabilities for CSS cascading style sheets. Now we can define variables in Sass to be referenced and even calculated in different styles, and define mixins for reuse in different places. These capabilities are not available in CSS. After compilation, Sass will output standard CSS files for use in different browsers.

Sass features:
Mixins - classes within classes;
Parameter mixins - classes that can pass parameters, just like functions;
Nesting rules - nest classes within Classes, thereby reducing repeated code;
Operation - use mathematics in CSS;
Color function - you can edit colors;
Namespace - Group styles so they can be called;
Scope - modify styles locally;
JavaScript assignment - use JavaScript expressions to assign values ​​in CSS.
Detailed introduction and explanation of Sass can be found at: http://sass-lang.com/
Compass
Compass is a Ruby-based, open source framework for CSS creation. It uses the Sass style sheet language, which can construct style sheets very easily and efficiently. At the same time, Compass has built-in a large number of excellent reusable patterns in web development for developers to use. A simple equation is used below to demonstrate the role of Compass:
Compass = A large number of reusable excellent CSS patterns in the Sass style sheet language
The detailed introduction and explanation of Compass can be found at: http://compass-style. org/
Preparation work (installation of running environment)
Installing Ruby
Using SASS and Compass requires Ruby. You can download the Ruby installation package from http://rubyinstaller.org/. The downloaded file is "rubyinstaller-1.9.3-p429.exe".
(Note, do not download the latest version of Ruby 2.0.0-p195, otherwise errors will occur due to version issues during subsequent development. Ruby 1.9.3-p429 will do.)
Double-click to run, the steps are as follows:
Note that Select all 3 options on the installation directory.
Click Done.
At this point, Ruby installation is complete.
Under the Ruby program group on the Start menu, click "Start Command Prompt with Ruby".

Enter Ruby’s command line interface. Enter
ruby –v
and press Enter. The interface prompt is as follows:

indicating that the Ruby operating environment is successfully installed.
Install Compass and Sass
To use Compass, you first need to install the framework in Ruby.
Under the Ruby program group on the start menu, click "Start Command Prompt with Ruby" to display the command prompt window. Enter the following command on the command line to start installing Compass:
gem install compass
(This command can automatically remotely install Compass related documents into a local folder. Due to the remote installation method, the installation time is long, please be patient. Wait.)
When you see the information in the window as shown below, it means that Compass has been installed successfully.

As you can see from the picture, sass-3.2.9 version and compass-0.12.2 version have been installed.
Execute in the command line: compass -v and sass -v to view the version information installed in the current system respectively.
At this point, the installation of Sass and Compass has been completed.
Compass project (Sass compiled into Css)
1. Project initialization
Next, you need to create your Compass project. Assuming its name is myproject, then type on the command line:
compass create myproject
A myproject subdirectory will be generated in the current directory.
Enter the directory:
cd myproject
You will see that there is a config.rb file inside, which is the configuration file of your project. There are also two subdirectories, sass and stylesheets. The former stores Sass source files and the latter stores compiled css files.

Next, you can start writing code.
2. Compile
Before writing code, we also need to know how to compile. Because what we write is a file with the suffix scss, it can only be used in the project if it is compiled into a css file.
The compilation command of Compass is
compass compile
This command is run in the project root directory and will compile the scss file in the sass subdirectory into a css file and save it in the stylesheets subdirectory.
By default, the compiled css file has a large number of comments. However, the production environment requires compressed css files, in which case the --output-style parameter must be used.
compass compile --output-style compressed
Compass only compiles changed files. If you want to recompile unchanged files, you need to use the --force parameter.
compass compile --force
In addition to using command line parameters, you can also specify the compilation mode in the configuration file config.rb.
output_style = :expanded
:The expanded mode means that the original format is retained after compilation. Other values ​​include:nested, :compact and :compressed.
Description:
* nested: Nested indented css code, it is the default value.
* expanded: Unindented, expanded css code.
* compact: css code in a concise format.
* compressed: compressed css code.
After entering the production stage, you need to change to:compressed mode.
output_style = :compressed
You can also intelligently determine the compilation mode by specifying the environment value (:production or:development).
environment = :development

output_style = (environment == :production) ? :compressed : :expanded
In command line mode, in addition to one-time compilation commands, compass also has automatic compilation commands
compass watch
After running this command, whenever the scss file changes, it will be automatically compiled into a css file.
For more compass command line usage, please refer to the official documentation.
Integration of Compass, Sass and eclipse
Through the above configuration, we can edit the Sass file through a text compiler, etc., then compile Sass into css through Ruby through the corresponding directory structure, and then copy and paste it into eclipse Development is carried out within our projects. It can be seen that this process is relatively cumbersome. So, how can you directly edit Sass files in eclipse and automatically compile them into css for engineering application? The following is a study on the integration of Compass, Sass and eclipse.
1 Confirm that ant has been installed
2 Open the "properties" of the project, select "Builders", and then click the "New..." button
3 Select "Ant Builder" and click "OK"
4 Enter Name "compass.compile", in the "Main" Tab page, click "Browse Workspace" to select the build.xml file that has been placed in the project.
5 Select the "Targets" tab, click the "Set Targets" button in Auto-Build, select "compass.compile" to use Compass ("sass.compile" just uses Sass), and click "OK"
6 Select the "Build Options" tab, click the "Select Resources" button, select the Sass file directory, click "Finish", and then click "OK".
Now when editing a Sass file, the css file will be automatically created or updated.
Sencha CMD Installation
Sencha CMD is a command line tool for packaging and deploying ExtJs and Sencha Touch applications. In order to develop ExtJs4.2 themes, you must install Sencha CMD3.1 or higher.
7 Install Java Run-time Environment or JRE, version required>=6.0.
8 In order to edit styles, Compass and Sass are required, so Ruby needs to be installed. Note, do not download the latest version of Ruby2.0.0-p195, otherwise errors will occur due to version issues during subsequent development. Ruby 1.9.3-p429 will do.
9 Download the Sencha Cmd installation package and install it.
10 Download and unzip Ext JS SDK.
ExtJS custom theme style development
2.3.1 Create workspace
(Note, do not use Chinese for directory names, etc., and it is best not to use special symbols, otherwise an error will occur)
Open the system cmd command Run the window and navigate to the directory where the SDK is decompressed. Enter
sencha -sdk d:/ExtJs4-App/ext-4.2.1.883 generate workspace my-workspace
to create a workspace containing a custom theme package named my-workspace. This command associates the Ext JS SDK and packages into your workspace so that themes and applications can find the dependencies they need. The themes and applications generated by this command must be executed in the workspace directory, so change your working directory to the new "my-workspace" directory:
cd my-workspace
You should be in "my-workspace" Two folders are seen under the folder:
l "ext": contains Ext JS SDK
l "package" contains Ext JS locale and theme package

2.3.2 Generate an application Theme for testing
Before creating a custom theme, we need to set up a method to test the theme. The best way to test it is to use it within an application. Run the following command in the "my-workspace" directory:
sencha -sdk ext generate app ThemeDemoApp theme-demo-app
This tells Sencha Cmd to generate a The application named ThemeDemoApp is also associated with the Ext JS SDK in the "Ext" directory. Now let's build the app:
cd theme-demo-app
sencha app build
There are two ways to run your app:
11 Development mode: Open "theme- demo-app/index.html".
This resource (source file) is not compressed and is easy to debug.
12 Product mode: Open "build/ThemeDemoApp/production/index.html" through the browser.
This is to compress resources (source files) in order to provide applications with smaller memory footprint and better performance.
2.3.3 Generate theme package and file structure
Sencha Cmd allows automatic generation of theme package and file structure. Run the following command under "theme-demo-app":
sencha generate theme my-custom-theme
This tells Sencha Cmd to create a theme named "my-custom-theme" under the current workspace Bag.
Let’s take a look at its contents:
l “package.json” – This is the package properties file. It tells Sencha Cmd some package information, such as name, version, and dependencies (configurations required by other packages).
l "sass/" - This directory contains all sass files related to the theme. The sass file is divided into three main parts:
1) "sass/var/" - contains sass variables;
2) "sass/src/" - contains sass rules and UI mixin calls, which can be used Variables under "sass/var/";
3) "sass/etc/" - files containing additional public functions or mixed in "sass/var/" and "sass/src/". These files Should be a structured matching component classpath. For example, the style variables of Ext.panel.Panel should be placed in a file named "sass/var/panel/Panel.scss". ​
l "resources/" - Contains images and other static resources required by the theme. ​
l "overrides/" - Contains some JavaScript that replaces Ext JS component classes (classes that theme components).
2.3.4 Configuring Theme Inheritance
Theme packages are usually special packages with a very important and additional functionality, and they can be inherited from other theme packages. The new version of Ext Js 4.2 uses this feature of theme packages to create its theme hierarchy:

Each theme package must extend from the Base theme. The next step in creating a custom theme is to figure out which theme to extend from. You can see the following theme packages in the workspace:
l "ext-theme-base"--This package is the basic theme for other themes. It is the only theme package without a parent theme. It contains the minimum values ​​for setting CSS rules that are necessary to make Ext JS components and layouts work correctly. Style rules for "ext-theme-base" are not configurable in derived themes, and overriding any style rules created by this theme should be avoided.
l "ext-theme-neutral"--Extended from "ext-theme-base", including most configurable style rules. Most of the variables are used to configure the styles of Ext JS components defined in "ext-theme-neutral". These variables can be replaced by custom themes.
l "ext-theme-classic"--Default theme. Extended from "ext-theme-neutral".
l "ext-theme-gray"--extended from "ext-theme-classic"
l "ext-theme-access"--extended from "ext-theme-classic".
l "ext-theme-neptune"--extended from "ext-theme-neutral".
It is recommended to use "ext-theme-neptune" or "ext-theme-classic" as the starting node of the custom theme extension. This is because these themes contain all the necessary code to create an attractive and ready-to-use theme. "ext-theme-neutral" is a very abstract theme and should not be used directly for extensions. Expanding a custom theme based on "ext-theme-neutral" requires hundreds of variable coverage and excessive workload, and only very advanced theme developers may be able to perform this work. On the contrary, using "ext -theme-neptune" or "ext-theme-classic" can be up and running in minutes by simply changing a few variables. Alternatively you can override "ext-theme-gray" or "ext-theme-access" if they provide a more ideal starting point for custom themes.
For example, we create a custom theme extended by "ext-theme-neptune". First, you need to replace the directory "packages/my-custom-theme/package.json":
"extend": "ext-theme-classic"
to
"extend": "ext-theme-neptune"
You need to update your app now. Make sure the correct theme JavaScript files are included in the application "bootstrap.js" so the application can run in development mode. Run the following command in the "theme-demo-app" directory.
sencha app refresh

2.3.5 Configure global theme variables
Now that you have created your own theme package, you can start modifying the theme appearance. First modify the basic color that can derive the public color of the ExtJs component. Under "my-custom-theme/sass/var/", create a file named Component.scss and enter in the file:
$base-color: #317040 !default;
If you want Your custom theme is extensible, be sure to configure !default at the end of all variables. Without !default you will not be able to override a derived theme's variables because Sencha Cmd variables follow the "reverse" rule - most derived styles first, base styles last. For more !default information, please refer to: Variable Defaults.
For a complete list of Ext JS global SASS variables, please refer to: Global_CSS.
2.3.6 Build package
In order to generate css files for all customized style rules, you need to run the command in the "packages/my-custom-theme/" directory:
sencha package build
This A directory will be built under package.Under "my-custom-theme/build/resources" you will find a file named my-custom-theme-all.css. This file contains style rules for all Ext JS components. You could use this file directly in your application, but this is not advisable because the "all" file contains all styles, but Ext JS components and most applications only use a subset of Ext JS components. Sencha Cmd can filter out unused CSS style rules when you build an application, but first we need to configure the test application to use a custom theme.
2.3.7 Using a theme in one application
Configure the test application for the custom theme you just created. Find theme-demo-app/.sencha/app/sencha.cfg
app.theme=ext-theme-classic
and change it to
app.theme=my-custom-theme
if you already After running an application built using the classic theme, you should clean the build directory. Run from theme-demo-app:
sencha ant clean
Then build the application:
sencha app build
Open "theme-demo-app/index.html" in the browser, you will see Go to the following

2.3.8 Configuring component variables
Each Ext JS component has a list of global variables that can be used to configure its appearance. Next, let's change the font type of the panel title. Create the file "packages/my-custom-theme/sass/var/panel/Panel.scss" with the following code:
$panel-header-font-family: Times New Roman !default;
In "theme- Run under "demo-app":
sencha app build
Open "theme-demo-app/index.html" in the browser, you will see the following

in each section of the API document In the section "CSS Variables", there is a detailed list of component SASS variables.
2.3.9 Create a custom component UI
In the ExtJs framework, each component has a configuration interface (default is "default"). This property can be configured on a single component instance to differentiate it from other components of the same type, giving them a different appearance.
Create the file "packages/my-custom-theme/sass/src/panel/Panel.scss" with the following code:

Copy the code The code is as follows:

@include extjs-panel-ui(

$ui-label: 'highlight-framed',

$ui- header-background-color: red,

$ui-border-color:red,

$ui-header-border-color:red,

$ui-body -border-color:red,

$ui-border-width:5px,

$ui-border-radius:5px

);

Open "theme-demo-app/app/view/Viewport.js" and modify the code as follows:

Copy the code The code is as follows:

Ext.define('ThemeDemoApp.view.Viewport', {

extend: 'Ext.container.Viewport',

requires:[

'Ext.layout.container.Border',

'ThemeDemoApp.view.Main'
],



layout: {

type: 'border'
},



items: [{

// default UI

region: ' west',

xtype: 'panel',

title: 'West',

split: true,

width: 150
} , {

// custom "highlight" UI

region: 'center',

xtype: 'panel',

layout: 'fit' ,

bodyPadding: 20,

items: [

{

xtype: 'panel',

ui: 'highlight' ,

frame: true,

bodyPadding: 10,

title: 'Highlight Panel'
}

]

}, {

// neptune "light" UI

region: 'east',

xtype: 'panel',

ui: 'light ',

title: 'East',

split: true,

width: 150
}]

});

Run the program under "theme-demo-app":
sencha app build
Open "theme-demo-app/index.html" in the browser, you will see the following

While UIs are a convenient way to mix multiple appearance configurations into a single component, they should not be overused. Because each call to the UI mixin will generate additional CSS rules, calling the UI mixin for free will generate excessively large CSS files.
Another important thing to remember is that when calling a UI mixin, you are calling the mixin with its named parameters, not an ordered list without parameter values. Although SASS supports both forms, it is better to use this form:

Copy the code The code is as follows:

@include extjs-component-ui(

$ui-foo: foo,

$ui-bar: bar

);

Avoid the following form:
@include extjs-component-ui(foo, bar);
Because the complexity and number of mixin parameters may change, such as adding or deleting a parameter, then the latter This calling method will fail.
2.3.10 Modify image resources
All required image resources are inherited from the parent theme by default, but in some cases, you may need to override an image. This can be done by placing the desired image under "my-custom-theme/resources/images/" overwriting an image with the same name. For example, let's modify the popup component's information icon. Save "packages/my-custom-theme/resources/images/shared/icon-info.png"
Now modify the test application to display a message box using the custom icon. Add items("theme-demo-app/app/view/Viewport.js") in the highlight panel of the application window:

Copy code The code is as follows:

requires: [
...

'Ext.window.MessageBox',
...

],
...

title: 'Highlight Panel',

items: [{

xtype: 'button',

text : 'Show Message',

handler: function() {

Ext.Msg.show({

title: 'Info',

msg : 'Message Box with custom icon',

buttons: Ext.MessageBox.OK,

icon: Ext.MessageBox.INFO

});
}

}]

Build the app and view it in the browser:

Original styles:

2.3.11 for CSS3 effects in IE Cutting Images
In many cases, when creating new user interfaces, background gradients or rounded corners may be included. Unfortunately, not all browsers support CSS3 properties, so we have to use images to compensate. Sencha Cmd can automatically cut these images for you. To do this, we need to tell Sencha Cmd which components need to be sliced. These slicing configuration files are included in the "sass/example/" directory of each theme. Refer to "packages/ext-theme-base/sass/example/":
"shortcuts.js"--This file contains the basic configuration of the component type and can be cut. Most custom themes do not need to include a "shortcuts.js" file; unless your theme includes custom component styles. Your style inherits all the shortcut key definitions of the basic style. You can also add additional shortcut definitions by calling the Ext.theme.addShortcuts() function in the "shortcuts.js" file. ​
"manifest.js"--This file contains a list of component UI that can generate sliced ​​images. You can inherit all manifest entries from the parent theme, or add your own manifest entries by calling the Ext.theme.addManifest() function in "manifest.js". ​
"theme.html"--This file is used to render files defined in "manifest.js".
Create a rounded slice for the "highlight" panel, create "packages/my-custom-theme/sass/example/manifest.js", the code is as follows:

Copy the code The code is as follows:

Ext.theme.addManifest(

{

xtype: 'panel',

ui: 'highlight'
}

);

Edit "packages/my-custom-theme/sass/example/theme.html" and add the following Script tag:

Copy code The code is as follows:

To be able to slice the UI when building the application, two script tags must be added in "theme-demo-app/sass/example/theme.html":

Copy code The code is as follows:

Build the application and browse it in IE8 and below. You can see that the "highlight" panel displays rounded corners, which is consistent with the CSS3 effect in IE9 and other browsers.
(in IE7)
2.3.12 Overriding Theme JS
Sometimes a theme can change the appearance of components by configuring JS. This can be achieved by overriding the JavaScript in the theme package. For example, create "packages/my-custom-theme/overrides/panel/Panel.js" with the following code:

Copy code The code is as follows:

Ext.define('MyCustomTheme.panel.Panel', {

override: 'Ext.panel.Panel',

titleAlign: ' center'
});

Now you need to build the theme package so that "packages/my-custom-theme/build/my-custom-theme.js" includes this new overlay file. Run under "packages/my-custom-theme/":
sencha package build
The application should now be refreshed so that running the application in development mode will include the theme's JS overlay files. Run under "theme-demo-app":
sencha app refresh
Build the app:
sencha app build
Open "theme-demo-app/index.html" in the browser, you You will see the following