ExtJS custom theme style details

This article is based on Ext JS 4.2.1
UI component Basics
Learning ExtJS is the use of learning components. ExtJS4 restructured the framework. The most important thing is to form a structure and hierarchical component system, which forms the Ext control.
There are nearly 100 components in the component system of ExtJs4, which can be roughly divided into four categories: Container components, toolbar and menu bar components, forms and element components, and other components.
Theme
ExtJs4 introduces a brand new theme system. It uses Sass and Compass technologies to provide standard theme templates. By simple customization of the theme templates, various themes can be created.

Sass and Compass Overview
Sass
The Sass style sheet language is an extension of CSS. It provides CSS features such as variables, embedded rules, mixins, and Selector inheritance. It is 100% compatible with CSS3 in the latest Sass3, syntax files are also upgraded to SCSS (Sassy CSS). Each valid CSS3 file is also an effective SCSS file. This compatibility reduces learning costs, developers can smoothly transition from CSS to Sass development.
The Sass style sheet language provides the programming capability for CSS Cascading Style Sheets. Now we can define variables in Sass to reference or even compute in different styles, and define mixins) these capabilities are not available in CSS for reuse in different places. After compilation, Sass will output standard CSS files for use in different browsers.

Sass features:
Mixins -- class in the class;
Parameter mixing-class that can pass parameters, just like a function;
Nested rules-nested classes in the Class to reduce repeated code;
Computation-mathematics is used in CSS;
Color function-you can edit the color;
Namespace-group style, which can be called;
Scope -- modify the style locally;
JavaScript assignment-use a JavaScript expression to assign values in CSS.
Sass detailed introduction and instructions visible: http://sass-lang.com/
Compass
Compass is a Ruby-based, open-source framework for CSS creation. It uses the Sass style sheet language to easily and efficiently construct style sheets. At the same time, Compass has a large number of excellent modes that can be reused in Web development for developers to use. The following uses a simple equation to demonstrate the role of Compass:
Compass = Sass style sheet language + a large number of excellent reusable CSS Modes
See: http://compass-style.org/
Preparation (installation and running environment)
Install Ruby
Ruby is required for SASS and Compass ".
(Note: Do not download the latest version Ruby2.0.0-p195. Otherwise, an error will occur in later development. Ruby 1.9.3-p429 .)
Double-click to run the task as follows:
Note: select the three options in the installation directory.
Click Finish.
So far, Ruby has been installed.
Under the Ruby Program Group in the Start Menu, click Start Command Prompt with Ruby ".

Go to the Ruby command line interface. Input
Ruby-v
After you press enter, the following page is displayed:

Indicates that the Ruby runtime environment is successfully installed.
Install Compass and Sass
To use Compass, you must first install the framework in Ruby.
Under the Ruby Program Group in the Start Menu, click Start Command Prompt with Ruby to display the Command Prompt window. Run the following command on the command line to install Compass:
Gem install compass
(This command can automatically remotely install Compass documents to a local folder. Due to the Remote Installation Method, the installation takes a long time. Please be patient .)
When you see the information in the window shown in, Compass is successfully installed.

We can see that sass-3.2.9 and compass-0.12.2 have been installed.
Run compass-v and sass-v in the command line to view the installed version information in the current system.
So far, Sass and Compass have been installed.
Compass project (Sass compiled into Css)
1. Project Initialization
Next, create a Compass project. Assume its name is myproject. Then, on the command line, type:
Compass create myproject
A myproject subdirectory is generated in the current directory.
Enter this directory:
Cd myproject
You will see that there is a config. rb file, which is the configuration file of your project. There are also two sub-directories, sass and stylesheets. The former stores the Sass source files, and the latter stores the compiled css files.

Next, you can write the code.
2. Compile
Before writing code, we also need to know how to compile it. Because we have written a file with the suffix scss. It can be used in projects only when it is compiled into a css file.
The compile command of Compass is
Compass compile
Run this command in the project root directory to 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 contains a large number of comments. However, to compress the css file in the production environment, use the -- output-style parameter.
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 the command line parameters, you can also specify the compilation mode in the config. rb configuration file.
Output_style =: expanded
: Expanded mode indicates that the original format is retained after compilation. Other values include: nested,: compact, and: compressed.
Note:
* Nested: nested indent css code, which is the default value.
* Expanded: No indented, extended css code.
* Compact: css code in concise format.
* Compressed: the 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 value of environment (: 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 you run this command, as long as the scss file changes, it will be automatically compiled into a css file.
For more usage of the compass command line, see the official documentation.
Integration of Compass and Sass with eclipse
Through the above configuration, we can use the text compiler to edit the Sass file, and then compile the Sass into css through the corresponding directory structure through Ruby, copy and paste it to our project in eclipse for development. It can be seen that this process is cumbersome. In eclipse, how can I directly edit the Sass file and automatically compile it into css for engineering application? The following is the integration of Compass, Sass and eclipse.
1. Confirm that ant has been installed.
2. Open "properties" of the project, select "Builders", and click "New ..." Button
3. Select "Ant Builder" and click "OK"
4. Enter the name "compass. compile". On 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 "Set Targets" in Auto-Build, and select "compass. compile to use Compass ("sass. compile), click "OK"
6. Select the "Build Options" Tab, click the "Select Resources" button, Select the Sass file directory, click "Finish", and then click "OK ".
After editing the Sass file, the css file will be automatically created or updated.
Install Sencha CMD
Sencha CMD is a command line tool for packaging and deploying ExtJs and Sencha Touch applications. To develop the topic of ExtJs4.2, you must install Sencha release 3.3.1 or a later version.
7. install Java Run-time Environment or JRE. required version> = 6.0.
8. To edit Styles, you need to install Ruby because Compass and Sass are required. Note: Do not download the latest version Ruby2.0.0-p195. Otherwise, an error will occur due to version issues in future development. Ruby 1.9.3-p429.
9. Download The Sencha Cmd installation package for installation.
10. Download and decompress the Ext js sdk.
ExtJS custom theme style development
2.3.1 create a workspace
(Note: Do not use Chinese characters for directory names, or use special symbols. Otherwise, errors may occur)
Open the cmd command line window of the system and locate the directory to which the SDK is extracted. Input
Sencha-sdk d:/ExtJs4-App/ext-4.2.1.883 generate workspace my-workspace
A workspace named my-workspace is created with the package of the custom topic package. This command associates the Ext js sdk and package into your workspace so that themes and applications can find the dependencies they need. The topic and Application 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 see two folders in the my-workspace Folder:
L "ext": including Ext JS SDK
L "package" contains the Ext JS language environment and topic package

2.3.2 generate an application to test the topic
Before creating a custom topic, we need to set a method to test the topic. The best test method is to use it in 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 an application named ThemeDemoApp in a new subdirectory "theme-demo-app" and associate it with the Ext js sdk under the "Ext" directory. Now let's build the application:
Cd theme-demo-app
Sencha app build
There are two ways to run your application:
11 development mode: Open "theme-demo-app/index.html" in the browser ".
This method does not compress resources (source files) and is easy to debug.
12. Product mode: Open "build/ThemeDemoApp/production/index.html" in the browser ".
This is to provide applications with smaller memory usage and better performance, and the resources (source files) are compressed.
2.3.3 generate the topic package and file structure
Sencha Cmd allows automatic generation of topic packages and file structures. Run the following command under theme-demo-app:
Sencha generate theme my-custom-theme
This tells Sencha Cmd to create a theme package named "my-custom-theme" in the current workspace.
Let's take a look at its content:
L "package. json" -- this is the package property file. It tells Sencha Cmd some package information, such as name, version, and dependencies (configurations required for other packages ).
L "sass/" -- this directory contains all sass files about the topic. Sass files are divided into three main parts:
1) "sass/var/" -- contains the sass variable;
2) "sass/src/" -- contains a mix of sass rules and UI calls. They can use variables under "sass/var;
3) "sass/etc/" -- contains additional public functions or files mixed into "sass/var/" and "sass/src, these files should be structured matching component class paths. For example, the style variables of Ext. panel. Panel should be placed in a file named "sass/var/panel/Panel. scss.
L "resources/" -- contains the images and other static resources required by the topic.
L "overrides/" -- contains some JavaScript that replaces the Ext JS component class (the topic class of the component.
2.3.4 configure topic inheritance
A topic package is a special package with very important additional functions. It can inherit from other topic packages. The new version of Ext Js 4.2 uses the topic package to create its topic hierarchy:

Each topic package must be extended from the Base topic. The next step for creating a custom topic is to find out from which topic to expand. You can see the following topic package in the Workspace:
L "ext-theme-base" -- this package is the basic topic of other themes. It is the only theme package without a parent topic. It contains the minimum values for setting CSS rules. These values are required to make the Ext JS component and layout work correctly. The style rules of "ext-theme-base" cannot be configured in the derived topic. Do not overwrite any style rules created by this topic.
L "ext-theme-neutral" -- extended from "ext-theme-base", contains the vast majority of configurable style rules. Most variables are used to configure the ext JS component style defined in "Ext-theme-neutral. These variables can be replaced by custom themes.
L "ext-theme-classic" -- default topic. 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.
We recommend that you use "ext-theme-neptune" or "ext-theme-classic" as the Start Node for custom topic extension. This is because these topics contain all the necessary code to create an attractive and immediately available topic. "Ext-theme-neutral" is a very abstract topic and should not be directly used for extension. The extension of custom themes based on "ext-theme-neutral" requires hundreds of variables to overwrite and excessive workload, and only very advanced topic developers can do this, otherwise, you can use "ext-theme-neptune" or "ext-theme-classic" to simply change several variables to start and run in a few minutes. In addition, you can overwrite "ext-theme-gray" or "ext-theme-access" to provide a better starting point for custom themes.
For example, we create a custom topic extended by "ext-theme-neptune. First, replace the directory "packages/my-custom-theme/package. json ":
"Extend": "ext-theme-classic"
Is
"Extend": "ext-theme-neptune"
You need to update your application now. Make sure that the correct theme JavaScript files are included in the app "bootstrap. js" so that the app 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 to modify the theme appearance. First, modify the base 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:
$ Base-color: #317040! Default;
If you want your custom theme to be scalable, you must configure it at the end of all variables! Default. No! By default, you will not be able to override a variable of a derived topic, because the Sencha Cmd variable follows the "reverse" rule-first for most derived styles, and last for the basic styles. More! For the default information, see Variable Defaults.
For a complete list of Ext JS global SASS variables, see Global_CSS.
2.3.6 build package
To generate css files for all custom style rules, run the following command in the "packages/my-custom-theme/" directory:
Sencha package build
This will build a directory under the 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 can use this file directly in the application, but this is not desirable, because the "all" file contains all styles, however, the Ext JS component and most applications only use a subset of the Ext JS component. When you build an application, Sencha Cmd can filter out unused CSS style rules, but first we need to configure the test program to use custom themes.
2.3.7 use a topic in an application
Configure the test application for the created custom topic. Find theme-demo-app/. sencha/app/sencha. cfg.
App. theme = ext-theme-classic
Change
App. theme = my-custom-theme
If you have already run an application that builds a classic topic, you should clear the build directory. Run theme-demo-app:
Sencha ant clean
Then build the application:
Sencha app build
Open "theme-demo-app/index.html" in the browser and you will see the following:

2.3.8 configure component Variables
Each Ext JS component has a list of global variables that can be used to configure its appearance. Next, we will change the font type of the panel title. Create the file "packages/my-custom-theme/sass/var/panel/Panel. scss". The Code is as follows:
$ Panel-header-font-family: Times New Roman! Default;
Run the following command in theme-demo-app:
Sencha app build
Open "theme-demo-app/index.html" in the browser and you will see the following:

In each section of the API documentation "CSS Variables", a detailed list of component SASS Variables is provided.
2.3.9 create a custom component UI
In the ExtJs framework, each component has a configuration interface (default "). This attribute can be configured in a single component instance, which is of the same type as other components and gives them a different appearance.
Create the file "packages/my-custom-theme/sass/src/panel/Panel. scss". The Code is as follows:
Copy codeThe 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/view/Viewport. js" and modify the Code as follows:
Copy codeThe 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 in "theme-demo-app:
Sencha app build
Open "theme-demo-app/index.html" in the browser and you will see the following:

Although the UI is a convenient method, you can mix multiple appearances and configure them as a component. They should not be overly used. Because every time you call UI mixin, additional CSS rules are generated. Calling UI mixin without charge will generate a large CSS file.
It is also important to remember that when calling UI mixin, you call mixin through its named parameters, rather than an ordered list without parameter values. Although SASS supports these two forms, it is best to use this form:
Copy codeThe Code is as follows:
@ Include extjs-component-ui (

$ Ui-foo: foo,

$ Ui-bar: bar

);

Avoid the following format:
@ Include extjs-component-ui (foo, bar );
Because the complexity and quantity of mixin parameters may change, such as adding or deleting a parameter, the latter method will become invalid.
2.3.10 modify image resources
All necessary image resources inherit the parent topic by default, but in some cases, you may need to overwrite an image. You can overwrite the image with the same name under "my-custom-theme/resources/images. For example, let's modify the information icon of the pop-up window component. Save "packages/my-custom-theme/resources/images/shared/icon-info.png"
Now, you can use the custom icon to modify the Display message box of the test application. Add items ("theme-demo-app/view/Viewport. js") in the highlight panel of the application window "):
Copy codeThe 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 M icon ',

Buttons: Ext. MessageBox. OK,

Icon: Ext. MessageBox. INFO

});
}

}]

Build an application and view it in the browser:

Original Style:

2.3.11 image cutting based on CSS3 effect in IE
In many cases, a new user interface may include a background gradient or a rounded corner. Unfortunately, not all browsers support the CSS3 attribute, so we must use images to make up for it. Sencha Cmd can automatically cut these images for you. To achieve this, we need to tell Sencha Cmd which components need to be sliced. These slice configuration files are included in the "sass/example/" Directory of each topic. See "packages/ext-theme-base/sass/example /":
"Shortcuts. js" -- this file contains the basic configuration of the component type, which can be cut. Most custom themes do not need to contain the "shortcuts. js" file unless your themes include custom component styles. Your style inherits the shortcut key definition of all basic styles, or you can add additional shortcut definitions. You need to call the Ext. theme. addShortcuts () function in the "shortcuts. js" file.
"Manifest. js" -- this file contains a list of component UIs that can generate sliced images. You can inherit all list entries from the parent topic, or add your own list entries by calling the Ext. theme. addManifest () function in "manifest. js.
"Theme.html" -- this file is used to render the file defined in "manifest. js.
Create a rounded corner slice for the "highlight" panel and create "packages/my-custom-theme/sass/example/manifest. js". The Code is as follows:
 Copy codeThe Code is as follows:
Ext. theme. addManifest (

{

Xtype: 'panel ',

Ui: 'highlight'
}

);
 
Edit "packages/my-custom-theme/sass/example/theme.html" to add the following script Tag:
Copy codeThe Code is as follows:
<! -- Required because Sencha Cmd doesn't currently add manifest. js from parent themes -->
<Script src = ".../ext-theme-neptune/sass/example/manifest. js"> </script>
<! -- Your theme's manifest. js file -->
<Script src = "manifest. js"> </script>

To slice the UI when building an application, you must add two SCRIPT tags in "theme-demo-app/sass/example/theme.html:
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = ".. /.. /.. /packages/ext-theme-neptune/sass/example/manifest. js "> </script>
<Script type = "text/javascript" src = ".. /.. /.. /packages/my-custom-theme/sass/example/manifest. js "> </script>

Build an application. In IE8 and earlier versions, you can see that the "highlight" panel displays rounded corners, which are consistent with the CSS3 effects on IE9 and other browsers.
(In IE7)
2.3.12 cover theme JS
Sometimes a topic can change the component appearance by configuring JS. It can be implemented by overwriting the JavaScript in the topic package. For example, to create "packages/my-custom-theme/overrides/panel/Panel. js", the Code is as follows:
Copy codeThe Code is as follows:
Ext. define ('mycustomeme. panel. Panel ',{

Override: 'ext. panel. Panel ',

TitleAlign: 'center'
});

Now you need to build the theme package to include this new override file in packages/my-custom-theme/build/my-custom-theme.js. Run the following command under "packages/my-custom-theme:
Sencha package build
Now we should refresh the application so that running the application in development mode will include the JS overwrite file for this topic. Run the following command in "theme-demo-app:
Sencha app refresh
Build applications:
Sencha app build
Open "theme-demo-app/index.html" in the browser and you will see the following: