[EXTJS6 Study notes] EXT JS6 Theme Series (Classic toolkit)

This paper mattered meters along

This address: http://blog.csdn.net/sushengmiyan/article/details/50186709

Translation Source: http://docs.sencha.com/extjs/6.0/core_concepts/theming.html

ExtJS's available theme packs are already very creative in creating a clean, professional program, but you may still want to provide your own design approach or existing enterprise design.

Historically, procedural beautification refers to the rules that provide rendering components to HTML tags, but there are some drawbacks to doing so. First, you need to be burdened with a variety of supported browsers. Secondly, as the framework matures, a lot of unhappiness will arise, such as changes in your rule style that require the pursuit of potential elements. The API provided by ExtJS is a good solution to these problems.

Themes created through the theming API can be shared in any ExtJS program. This runs you can write a rule once, repeating to your program continuously changing the style. This guide will list the necessary topics, whether you create a workspace or an application or create a personalized theme individually.

This guide will cover the basic theme of using Classic Toolkit (EXTJS), and then we'll cover different modern topics (Senchatouch), and eventually, Triton themes and extensibility will be introduced.

If you want to do the above, you will need to install Sencha cmd 6 or later. Optional JRE1.7 version, if you need to use app watch, it must be installed. If you don't install more than JRE7, you'll need to refresh the changes every time you start the Sencha app refresh.

Build a personalized theme

When you are ready for the above steps, you can customize the theme. You first need to create a workspace, but this is not required, create a workspace with the following command SENCHA-SDK {path/to/ext-js-sdk} Generate workspace My-workspace

First, create a test to use the work program

Using the command SENCHA-SDK ext generate app-classic Themedemoapp Theme-demo-app

Switch to the current program CD Theme-demo-app

Second, create a custom theme directory, use the command Sencha generate theme My-classic-theme

Launch Program Sencha app watch

Browser View Effect http://localhost:1841

Modify the extend node under Packages/local/my-classic-theme/package.json, "Extend": "Theme-neptune" modified to "extend": "Theme-crisp"

Third, configure global variables

Create file packages/local/my-classic-theme/sass/var/component.scss Add content $base-color: #317040;

Use a custom theme in your application. Find Theme-demo-app/app.json "theme": "Theme-triton", replace with "theme": "My-classic-theme",

Four, set the red border to Gridpanel, modify the my-classic-theme/sass/src/panel/panel.scss

@include Extjs-panel-ui (
$ui: ' 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,
$ui-header-color:white
);

Refreshes the application.

[EXTJS6 Study notes] EXT JS6 Theme Series (Classic toolkit)