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:
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:
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
