Ext js 4.2 Introduction

Original: introducing ext JS 4.2

Ext js 4.2 contains many exciting enhancements and features. You may have read some related functions and features in the previous article, such as grid component improvement. In this article, we will introduce the new Neptune subject and support from right to left (RTL.

Neptune

In ext JS 4.2, we are very pleased to welcome Neptune to this family as a fully officially supported topic. Finally, we can build modern applications. The appearance of modern features has always been very important for application development and use of Neptune themes. Ext Js now supports four core themes: neptune, classic, gray, and accessibility.

Neptune makes applications look cleaner, modern, and relaxed by minimizing unnecessary visual elements, such as borders and padding added in many places, this makes the overall interface feel more relaxed and open.

The goal of Neptune is far more than just to provide a new and beautiful look. Our wish is to make it easier for you to create a better application experience and better support as many browsers as possible. To support this work, we have made some significant progress in how to more easily achieve the main theme through customization and sharing.

Flexibility

The key to creating better applications is the ease of customization. To make changes, it must be as simple as possible, because it involves theme: something that cannot be put everywhere

To make ext JS themes as flexible as possible, we have greatly extended the use of sass variables. Because variables are linked together, variables use other variables to calculate their default values. If possible, the change will be passed as you expected (for example, Set "$ base-color ").

Topic package

Sencha cmd 3.1 added support for "packages": Independent packages for codes, styles, and resources. The theme packages currently delivered by Neptune and other ext JS 4.2 themes enable many exciting possibilities.

Typically, packages allow you to easily share code between applications and other developers. Ext js loader is used to analyze JavaScript classes, and the previous sencha cmd version is also very well processed, but now, using the package, sencha cmd can connect JavaScript classes and sass all over the world.

Internally, ext JS uses the sencha cmd capability to associate JavaScript and sass to generate its topic. That is to say, CMD processes "all. SCSs" and finally uses ext jsto install “all.css ". The generation process ensures that the sass variables and rules defined in an independent SCSs file are in the correct order according to the hierarchy of JavaScript classes. This allows us to easily share the sass logic between different themes as we share JavaScript classes.

Of course, these sencha cmd functions are not limited to generating ext Js. If you use cmd to generate
All-classes.js file, then, you can extend this to generate sass for the application. If you do this, you will first get another exciting thing: the CSS file will only contain the CSS actually used by the component. This also applies to defined views. Therefore, an application can organize its sass as an image of its script-over time, it will greatly help the application grow proxy.

In the same way as by not downloading unused JavaScript to improve user experience, removing unused CSS will be of great help. This makes CSS more true, because unnecessary rules are not easily ignored by the browser. Some browsers limit the number of rules in CSS files. Looking into the future, this will become more and more important as new components will be added and new features (such as RTL) across all components will be added ).

Custom topic

A topic is a special type of package with important additional features: a topic can be extended to other topics. This capability allows ext JS 4.2 to create its topic level:

There is an additional step in the Generation Process of the topic package to allow the topic to inherit its basic resources, or choose its own version to replace them. In addition, for IE compatibility issues, slicer is automatically called to convert the border radius and linear gradient style of css3 to the background image.

All of this allows you to create a topic by adding only the things you want to change (style rules, JavaScript code, or static resources such as slices. You do not need to copy or paste anything from the basic topic. This ensures that only the core theme is maintained so that your theme can inherit bug fixes or other enhancement features.

You can learn more about this process in the theme guide here, and learn more about the package in the pack Guide (http://docs.sencha.com/ext-js/4-2! /GUIDE/command_packages and http://docs.sencha.com/ext-js/4-2! /GUIDE/command_package_authoring ).

RTL

Supporting the right alignment language (Hebrew and Arabic) has always been a feature of long-term requirements, so we are happy to say that RTL is coming now. We are also happy to say that if you do not need RTL support, you can not enable it. You only need to add a small amount of additional code to the core of the framework.

The first step is to enable RTL to request the "Ext. RTL" namespace. The namespace contains many reloads, such as the following code:

Ext.define(‘Ext.rtl.button.Button’, {    override: Ext.button.Button’,    …

This series of overloading will overwrite the key locating methods of different classes in the framework, and add the necessary RTL checks and logic.

Step 2: As long as you support code injection into the framework, you can set RTL configuration items in the required container, such as viewport:

Ext.define(‘MyApp.views.Viewport’, {    extend: Ext.container.Viewport’,    requires: [        ‘Ext.rtl.*’    ],    rtl: true,    …

RTL in Sass

On the CSS side, RTL support can be enabled by setting the following sass variable:

$include-rtl: true;

This will increase the use of the ". X-RTL" selector for rtl css rules.
Hybrid LTR and RTL

The configuration item RTL is inherited from the component hierarchy. When you set it in viewport, The Global RTL is effectively set. This setting can also be enabled at a low level or changed later by setting "RTL: false". In this way, the lower level will be inherited from here.

Due to CSS restrictions of IE6 and IE, quirks and nested (nesting) are not supported ). These browsers can only load the CSS required for RTL support when RTL is global.

Localization

To simplify this process for applications, sencha cmd supports localization of the package type. Ext js 4.2 now provides Localization support for this form, so applications can simply request the appropriate localization package. The required JavaScript will be automatically included, and the sass variable containing RTL will be set accordingly. With this method, you can process an optimized JavaScript/CSS generation for each localization setting.

Performance

Without the Performance Comparison Between ext JS 4.2 and 4.1 and 4.0, we can say that this article is incomplete, although most of the performance improvement work has always been related to grid, however, some other changes are also due to performance reasons.

The scope of these changes includes removing CSS resetting (its numerous "expensive" rules for resetting, scope resetting, and not resetting ), removes the logic for processing the "framed" component from JavaScript (such as a button), simplifying the button tag and its component layout logic.

In the previous article, we used topic examples to compare ext JS 4.0.7 and 4.1. Since then, a good friend in the Community has submitted a testing sample program that is undoubtedly better than the theme, imitating his own practical application. I have tested this example in the same IE8/Windows 7 notebook. The result is as follows:

By segmenting the performance in ext JS 4.2 by category, it now looks like that. The number is in the previous version to show the progress from 4.0.7 to 4.1.1 to the current 4.2.0.

Performance problems will never end. We will continue to look for ways to provide performance. If you want to read more about grid and the new bufferedrenderer plug-in, read this article.

Inconspicuous

There are many minor improvements below. For more information, see the upgrade guide.

GRID/tree

There are several new examples to demonstrate how to combine many features that cannot work together before. Perhaps the most interesting thing is the locked treegrid.

The plug-in bufferedrenderer also applies to trees, so you can now process a tree (or treegrid) larger than before ). To view the locked and buffered rendering treegrid, you can view this example.

View all examples.

Tag

Labels can now be used vertically. You can see in the new side label example that they rotate and dock on the left or right.

Font

Many people want to use web fonts to add extensibility and cross-browser images for applications. To support this, you have added the glyph configuration item, which is very similar to icon and iconcls. You can set the glyph configuration to render code points and necessary text into components:

{    xtype: 'button',    glyph: 42} 

This supports buttons, labels, panel titles, and menu items. You can view the effect in the new kitchen sink example.
MVC

The introduction of event domains allows the Controller to respond to event triggers through something like stores or other controllers.

The following code is similar:

this.listen({    controller: {        '*': {  // any controller            foo: 'onFoo' // method names are now supported!        }    },    store: {        '#storeId': {            remove: ‘onStoreRemove’        }    },    component: { // same as this.control()    } }); 

Xtemplate

It is easier to enumerate objects in the template:

<tpl foreach=".">    <tr>        <td>{$}</td>        <td>{.}</td>    </tr></tpl>

"{$}" Is extended to the attribute name, while "{.}" is the attribute value.
Summary

Creating compelling and modern applications is hard work. It is even harder to make them look great and run fast. With improvements to Neptune, RTL, the new grid, the increased cmd, and all the new features in ext JS 4.2, it will never be so easy to provide your users with a wonderful experience.

Author:Don Griffin
Don Griffin is a member of the ext JS core team. he was an ext JS user for 2 years before joining sencha and has over 20 years of software engineering experience on a broad range of platforms. his experience designing web application front-ends and back-ends, native GUI applications, network protocols and device drivers. don's passion is to build world class products that people love to use.