ExtJS custom Theme (theme) style Detailed _ Basics

This article is based on ext JS 4.2.1 version
UI Component Basics
Learning ExtJS is the use of learning components. ExtJS4 the framework, the most important is the formation of a structured and hierarchical component system, these components form the control of ext.
There are nearly 100 components in the EXTJS4 component system, and these components can be roughly divided into four categories, namely, container class components, toolbars and menu bar components, forms and element components, and other components.
Theme Theme
EXTJS4 introduced a new thematic system, using sass and Compass Technologies, to provide a standard theme template that can create a variety of topics by simply customizing the theme templates.

Sass and Compass Overview
Sass
Sass Stylesheet Language is an extension of CSS, providing CSS variables, inline rules, mixing (mixins), selector inheritance and other features, in the latest SASS3 100% compatible CSS3, syntax files are upgraded to SCSS (sassy CSS), Each valid CSS3 file is also a valid SCSS file, which reduces the cost of learning, and developers can smoothly transition from CSS to sass development.
The Sass Stylesheet Language provides the ability to program CSS cascading style sheets, and now we can define variables in sass to reference or even compute in different styles, and define mixing (mixins) to reuse in different places, which are not available in CSS. After compiling, SASS will output standard CSS files to use in different browsers.

Sass Features:
Mixed class in (Mixins)--class;
parameter is mixed--class that can pass parameters, just like functions;
Nested rules--class class in order to reduce duplicate code;
Mathematics is used in the Operation--css;
Color function--can edit color;
Namespace (namespace)--grouping styles, which can be invoked;
Scope--local modification style;
JavaScript assignment-use JavaScript expressions in CSS to assign a value.
Sass details and instructions are visible: http://sass-lang.com/
Compass
Compass is a ruby based, Open-source, CSS-authoring framework. It uses the Sass Stylesheet language, which makes it easy and efficient to construct stylesheets, while Compass has a large number of reusable good patterns built into web development for developers to use. Here's a simple equation to show how Compass works:
Compass = SASS Style Sheet language + a large number of reusable excellent CSS patterns
Compass details and instructions are visible: http://compass-style.org/
Prepare for work (install the operating environment)
Install Ruby
Using SASS and compass requires ruby, you can download Ruby's installation package to http://rubyinstaller.org/, and the downloaded file is "Rubyinstaller-1.9.3-p429.exe".
(note, do not download the latest version of ruby2.0.0-p195, or later development will be due to the version of the problem error.) Ruby 1.9.3-p429 is OK. ）
Double-click to run the following steps:
Note Select all 3 options on the installation directory.
Click Finish.
At this point, Ruby is finished installing.
Under the Start Menu Ruby program group, click Start Command Prompt with Ruby.

Enter Ruby's command line interface. Input
Ruby–v
After the carriage return interface prompts as follows:

Indicates that the Ruby Runtime environment was successfully installed.
Install Compass and SASS
To use compass, you first install the framework in Ruby.
Under the Start Menu Ruby program group, click Start Command Prompt with Ruby to display the command Prompt window. Start the installation of Compass at the command line by entering the following command:
Gem Install Compass
(This command can automatically remotely install compass-related documents to a local folder, and because of the remote installation, the installation takes longer, please be patient.) ）
When you see the information in the window shown in the following illustration, it means that compass has been successfully installed.

As you can see from the diagram, the sass-3.2.9 and compass-0.12.2 editions have been installed.
Executing on the command line: Compass–v and Sass–v can view the version information installed on the current system separately.
Here, the installation of Sass and Compass has been completed.
Compass items (sass compiled into CSS)
1. Project initialization
Next, to create your compass project, assuming its name is MyProject, type at the command line:
Compass Create MyProject
An MyProject subdirectory is generated in the current directory.
Enter the directory:
CD MyProject
You will see that there is a config.rb file, which is the configuration file for your project. There are also two subdirectories sass and stylesheets, which store sass source files, which store the compiled CSS files.

Next, you can write the code.
2. Compile
Before writing the code, we also need to know how to compile it. Because we write a suffix named Scss file, only compiled into a CSS file, can be used on the project.
The compiler command for Compass is
Compass Compile
The command runs under the project root, and the Scss file in the SASS subdirectory is compiled into a CSS file and saved in the stylesheets subdirectory.
By default, the compiled CSS file has a large number of annotations. However, the production environment requires a compressed CSS file, when you want to use the--output-style parameter.
Compass Compile--output-style Compressed
Compass only compile changes to the file, if you want to recompile unchanged files, you need to use the--force parameter.
Compass Compile--force
In addition to using command-line arguments, you can specify the compilation mode in the configuration file CONFIG.RB.
Output_style =: Expanded
: Expanded mode means that the original format is retained after compilation, and other values include: nested, compact, and: compressed.
Description
* Nested: Nested indented CSS code, which is the default value.
* Expanded: No indented, extended CSS code.
* Compact: Concise format CSS code.
* Compressed: Compressed CSS code.
After entering the production stage, it should be changed to: Compressed mode.
Output_style =: Compressed
You can also intelligently determine the compilation mode by specifying the value of the environment (:p roduction or: development).
Environment =:d Evelopment

Output_style = (Environment = =:p roduction)? : Compressed:: Expanded
In command line mode, in addition to a one-time compile command, Compass also has an automatic compilation command
Compass Watch
When this command is run, it is automatically compiled into a CSS file as long as the Scss file changes.
For more Compass command line usage, please refer to the official documentation.
Compass, sass and Eclipse integration
Through the above configuration, we can edit the sass file through the text compiler, and then through the corresponding directory structure through Ruby to compile the sass into CSS, and then copy and paste into eclipse in our project, for development. It can be seen that this process is rather cumbersome. So how can you edit sass files directly in eclipse and automatically compile them into CSS for engineering applications? The following is an integration study of compass, sass, and Eclipse.
1 confirm that Ant is installed
2 Open the Project "Properties", select "Builders", then click "New ..." Button
3 Select "Ant Builder" and click "OK"
4 Enter the name "Compass.compile" and click "Browse Workspace" in the "Main" tab page to select the Build.xml file that has been placed in the project.
5 Select "Targets" tab page, click "Set Targets" button in Auto-build, choose "Compass.compile" to use Compass ("sass.compile" just use sass), click "OK"
6 Select "Build Options" tab, click "Select Resources" button, select Sass File directory, click "Finish", and then click "OK".
Now when you edit the sass file, the CSS file will be created or updated automatically.
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 versions.
7 Install Java Run-time Environment or JRE, require version >=6.0.
8 to edit styles, you need compass, Sass, so you need to install Ruby. Note, do not download the latest version of ruby2.0.0-p195, or later development will be due to the version of the problem error. Ruby 1.9.3-p429 is OK.
9 Download Sencha cmd installation package for installation.
10 Download and unzip the ext JS SDK.
ExtJS Custom Theme Style development
2.3.1 Create a workspace
(Note, directory name, etc. do not use Chinese, special symbols are best not to use, or you will be wrong)
Open the System cmd Command Line window and navigate to the directory where the SDK is extracted. Input
SENCHA-SDK d:/extjs4-app/ext-4.2.1.883 Generate Workspace My-workspace
Created a workspace containing the custom theme package package named My-workspace. This command associates the Ext JS SDK with the package in your workspace so that themes and applications can find the dependencies they need. This command generates themes and applications that 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 under the "My-workspace" folder:
L "EXT": Include ext JS SDK
L "Package" contains Ext JS locale and Subject pack

2.3.2 Build an application to test the topic
Before creating a custom theme, we need to set up a method to test the topic. The best way to test this is to use it in an application. Run the following command under the "My-workspace" directory:
SENCHA-SDK ext Generate app Themedemoapp Theme-demo-app
This tells Sencha cmd to build an application named Themedemoapp in a new subdirectory "Theme-demo-app" and also to associate 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" through the browser.
This is not a resource (source file) compression, easy to debug.
12 Product Mode: Open "build/themedemoapp/production/index.html" through the browser.
This is to provide the application with a smaller memory footprint and better performance, a resource (source file) compression.
2.3.3 Generate theme packages and file structures
Sencha cmd allows automatic generation of subject packs and file structures. Under Theme-demo-app, run the following command:
Sencha Generate Theme My-custom-theme
This is to tell Sencha cmd to create a topic package named "My-custom-theme" under the current workspace.
Let's take a look at its contents:
L "Package.json"-This is the package properties file. It tells Sencha cmd some of the package information, such as name, version, and dependencies (the configuration required for other packages).
L "sass/"-this directory contains all SASS files on the subject. The sass file is divided into three main sections:
1) "sass/var/"--Contains sass variables;
2 "sass/src/"-contains sass rules and UI mixed calls, which can use variables under "sass/var/";
3 "sass/etc/"--contains additional common functions or files that are mixed in "sass/var/" and "sass/src/", which should be structured to match the component classpath. For example, Ext.panel.Panel style variables should be placed in a file named "Sass/var/panel/panel.scss."
L "resources/"-contains images and other static resources that the subject requires.
L "overrides/"--contains some JavaScript that replaces the class of the Ext JS Component class, which is the subject of the component.
2.3.4 Configuration Topic Inheritance
Topic packs are usually such special packages that have a very important, additional feature that can be inherited from other topic packs. The new version of Ext Js 4.2 uses this feature of the theme pack to create its thematic hierarchy:

Each topic package must be extended from the base theme. The next step in creating a custom theme is to find out which topic to expand from. You can see the following topic packs in the workspace:
L "Ext-theme-base"-this package is the basic theme of other topics, it is the only one without a parent theme package. It contains the minimum values for setting CSS rules that are necessary for the Ext JS component and layout to work correctly. Style rules for "ext-theme-base" are not configurable in derived topics, and you should avoid overwriting any style rules created by this topic.
L "ext-theme-neutral"-extended from "Ext-theme-base", contains most of the 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 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 that you use "Ext-theme-neptune" or "Ext-theme-classic" as the starting node for a custom theme 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 used directly for expansion. The extension of a custom theme based on "Ext-theme-neutral" requires hundreds of variable overlays and too much work, and may only be done by very advanced topic developers, instead of using "Ext-theme-neptune" or " Ext-theme-classic "can be started and run in minutes by simply changing several variables. Alternatively, you can override "Ext-theme-gray" or "ext-theme-access" if they can provide a more ideal starting point for customizing the theme.
For example, we create a custom theme that is extended by "Ext-theme-neptune". First you need to replace the directory "Packages/my-custom-theme/package.json":
"Extend": "Ext-theme-classic"
For
"Extend": "Ext-theme-neptune"
You need to update your application now. Make sure that the correct theme JavaScript files are included in the application "bootstrap.js" so that the application can run in development mode. Run the following command under the "Theme-demo-app" directory.
Sencha App Refresh

2.3.5 Configure global Theme variables
Now that you have created your own topic pack, you can begin to modify the theme's 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 it in the file:
$base-color: #317040!default;
If you want your custom theme to be extensible, be sure to configure!default at the end of all variables. Without!default you will not be able to overwrite a derived subject variable because the Sencha cmd variable follows the "reverse" rule--most derived styles first, the basic style last. More!default information can be referred to: Variable Defaults.
Complete Ext JS Global sass Variable list please refer to: global_css.
2.3.6 Build Package
In order for all custom style rules to generate CSS files, you need to run the command in the "packages/my-custom-theme/" directory:
Sencha Package Build
This will build a directory 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 can use this file directly in your application, but this is not advisable because the "all" file contains all the styles, but the Ext JS component and most applications use only a subset of the Ext JS component. When you build an application, Sencha cmd filters out unused CSS style rules, but first we need to configure the test program to use a custom theme.
2.3.7 use a theme in an 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
Amended to
App.theme=my-custom-theme
If you've already run an application that builds on a classic theme, you should clean up 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 and you will see the following

2.3.8 Configuration component's variables
Each Ext JS component has a list of global variables that can be used to configure its appearance. Now, 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;
Run under "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 document, "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 (defaults to "Default"). This property can be configured in a single instance of a component, distinguishing it from the same type of other components, giving them a different look.
Create the file "Packages/my-custom-theme/sass/src/panel/panel.scss" with the following code:

Copy Code code 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 Code code 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 and you will see the following

Although the UI is a convenient way to mix multiple skins into one component, they should not be overused. Because additional CSS rules are generated each time a UI mixin is invoked, a free call to the UI Mixin produces an excessive CSS file.
It is also important to remember that when the UI mixin is invoked, it is called by its named arguments mixin, not an ordered list without parameter values. Although Sass supports both forms, it is best to use this form:

Copy Code code 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 are likely to change, such as adding or removing a parameter, the latter invocation method will fail.
2.3.10 Modify Image Resources
All required image resources are inherited by default, but in some cases you may need to overwrite an image. This can be done by overwriting the image of the desired image under "my-custom-theme/resources/images/" under the same name. For example, let's modify the information icon for the pop-up widget. Save "Packages/my-custom-theme/resources/images/shared/icon-info.png"
Now using the custom icon, modify the test application to display a message box. Add items ("Theme-demo-app/app/view/viewport.js") to the highlight panel in the application window:

Copy Code code 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 application and view it in the browser:

Original style:

2.3.11 for IE CSS3 effect cutting image
In many cases, you might include background gradients or rounded corners when you create a new user interface. Unfortunately, not all browsers support CSS3 properties, so we have to use images to compensate. Sencha cmd can automatically cut these pictures for you. To do this, we need to tell sencha what components need slicing. These slice profiles are included in the "sass/example/" directory for each topic. 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 topics do not need to contain "shortcuts.js" files, unless your theme includes custom component styles. Your style inherits all the basic styles of the shortcut key definitions, or you can add additional shortcut definitions, and you need to call the Ext.theme.addShortcuts () function in the "shortcuts.js" file.
"Manifest.js"-this file contains a list of component UI that can generate a slice image. You can inherit all of the manifest entries from the parent topic, or you can add your own manifest entries in "Manifest.js" by calling the Ext.theme.addManifest () function.
"Theme.html"-this file is used to render the file defined in "Manifest.js".
Create fillet slices for the "highlight" panel and create "Packages/my-custom-theme/sass/example/manifest.js" with the following code:

Copy Code code 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 Code code 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>

In order to be able to slice the UI while building the application, you must add two script tags to "theme-demo-app/sass/example/theme.html":

Copy Code code 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>

To build your application, you can see that the "highlight" panel shows rounded corners in IE8 and the following versions, and that the CSS3 effect in IE9 and other browsers is consistent.
(In IE7)
2.3.12 Overlay Theme JS
Sometimes a theme can change the appearance of a component by configuring JS. This can be done by overwriting the JavaScript in the subject pack. For example, create "Packages/my-custom-theme/overrides/panel/panel.js" with the following code:

Copy Code code as follows:

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

Override: ' Ext.panel.Panel ',

Titlealign: ' Center '
});

Now you need to build a theme pack to let "packages/my-custom-theme/build/my-custom-theme.js" include this new overwrite file. Run under "packages/my-custom-theme/":
Sencha Package Build
The application should now be refreshed so that running the application in development mode includes the JS overwrite file for that topic. Run under "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