Ext js 4 upgrade Guide

Preface

EXT 4 has taken a revolutionary step in Web application development. Basically, every major component of the framework has been improved. On the basis of ext3, many new components and subsystems have been added. This article describes the main changes from ext 3 to ext 4.

Ext3 compatibility

EXT provides ext 3 and ext 4 migration packages. You can download it as follows:

Ext js 3 to 4 migration pack (updated October 10,201 1)

Sandbox Mode

For JS objects and variables, you can simply isolate ext 4 from previous versions by giving the global ext object a different alias.

For CSS and other display items, ext 4 uses compass & sass to generate CSS from the template, and it is easy to customize the prefix of CSS rules. ---Ext. basecssprefixAttribute

Package and namespace updates

All classes and packages are reorganized according to strict naming rules, making it easier to search for classes. For example, in the ext 3 class, buttons, cyclebuttons, and splitbuttons are simply placed under widges.

In ext 4, each class is stored in the package and namespace according to different functions. For example, ext. splitbutton ---> Ext. Button. Split.

The restructured class can still be found through the alternateclassname attribute, so the class name of ext 3 can still be used in ext 4 (for example, define alternateclassname: 'ext. splitbutton ').

However, we recommend that you use the latest specifications if necessary.

EXT Core

New System

EXT 4 has the following functions:

1. Ext. Define defines a new type.

2. Automatic dependency management and Dynamic Loading

3. mixins (mixed in)

4. statics (static)

5. New configuration options automatically generated by setter/Getter

Class Definition

In ext 4, use Ext. Define to define a new class, but you can still use the "New classname ()" method, but there is no such feature,

You can use Ext. Define to automatically detect and create a namespace without defining the namespace.

For example:

// Ext 3:Ext.ns('MyApp'); // required in Ext 3MyApp.CustomerPanel = Ext.extend(Ext.Panel, {    // etc.});// Ext 4Ext.define('MyApp.CustomerPanel', {    extend: 'Ext.panel.Panel',    // etc.});

Class Loading

EXT 4 provides an optional function for class loading and integration dependency management. The advantage of using this function is that

1. Dynamic Loading. ext is managed internally and dynamically and asynchronously loaded according to the dependency tree during running.

2. dynamic compilation and generation.

Use Ext. Define and the attributes of the following classes to define dependencies.

Requries

Uses

Mixins

This is a new way to insert the customization function to an existing class, similar to Ext. Override. However, it does not overwrite the original functions like override. The definition is as follows:

Ext.define('Sample.Musician', {    extend: 'Sample.Person',    mixins: {        guitar: 'Sample.ability.CanPlayGuitar',        compose: 'Sample.ability.CanComposeSongs',        sing: 'Sample.ability.CanSing'    }});

Statics

You can define static methods in the class through the static attributes of the class.

Config

You can use "Config" to define attributes in the class. Ext will automatically generate the setter and getter methods. In earlier versions, we use APIs.

In config mode, the getter, setter, reset, and apply (customized logic) methods are automatically generated. For example:

Ext.define('MyClass', {    config: {        title: 'Default Title'    }});

The following method is automatically generated:

title: 'Default Title',getTitle: function() {    return this.title;},resetTitle: function() {    this.setTitle('Default Title');},setTitle: function(newTitle) {   this.title = this.applyTitle(newTitle) || newTitle;},applyTitle: function(newTitle) {    // custom code here    // e.g. Ext.get('titleEl').update(newTitle);}