ExtJS Class 4 System

The class system of the ExtJS 4 is a major refactoring, and the new architecture of EXTJS4 is built on this new class system, so it is necessary to understand the following class systems
This article is divided into four chapters

• I: "Overview" explains the importance of robust class systems
• II: "Naming conventions" best naming convention practice (in fact, it is required to comply with its specifications)
• III: Detailed examples of "hands-on"
• IV: "Errors Handling & Debugging" Some practical tips for handling problems

I. Overview overview

ExtJS 4 has more than 300 classes, the community has 20w+ different backgrounds of developers, providing a good code architecture is a huge challenge:

• Easy to learn, low learning cost
• Fast development, easy commissioning and release
• Well-organized and scalable to maintain

JavaScript is a language based on the inheritance of the prototype chain, without the concept of a class. And the JavaScript language feature is loose and free, to achieve a similar function, there can be many ways, but if it is allowed to loose and free, it is difficult to maintain and reuse code.
Object-oriented programming is mostly class-based. Class-based programming languages usually require strong typing, provide code encapsulation, and have standard coding habits, said a bunch of nonsense, not translated, summed up below is able to achieve both the normative object-oriented programming, but also to achieve the flexibility of JavaScript II. Naming conventions Naming specification

Naming conventions, using a consistent naming convention can make your code structure clear and readable. 1. Classes class

Class names can contain only alphanumeric characters, and numbers are not recommended unless they are common words. Do not use the underscore in the non-alphanumeric characters such as chemical fiber.

• Mycompany.useful_util. Debug_toolbar is illegal.
• MyCompany.util.Base64 Legal

classes should be organized under a package or namespace, and at least one top-level namespace, for example:

MyCompany.data.CoolProxyMyCompany.Application

The top-level namespaces and real classes should be named with the hump, and all the other lowercase, for example:

MyCompany.form.action.AutoLoad

Non-EXT official class, can not be in the EXT top-level namespace (this is to prevent conflicts)
The first-letter combination should also be named Camel, for example:

• Ext.data.JsonProxy , not Ext.data.JSONProxy .
• MyCompany.util.HtmlParser , not MyCompary.parser.HTMLParser .
• MyCompany.server.Http , not MyCompany.server.HTTP .

2. Source Files

The name of the class and the source file storage path are corresponding, for example:

• Ext.util.Observable stored inpath/to/src/Ext/util/Observable.js
• Ext.form.action.Submit stored inpath/to/src/Ext/form/action/Submit.js
• MyCompany.chart.axis.Numeric stored inpath/to/src/MyCompany/chart/axis/Numeric.js

This is the path/to/src program and directory of the app directory, all classes should be organized so that the maintenance of 3. Methods and Variables methods and member variables

• As with the class name can only use letters and numbers , other symbols can not
• Same as the hump name, but the first letter lowercase, the first letter combination

For example:

• Legal method Name: Replace, replace, replace encodeUsingMd5() getHtml() getHTML() getJsonResponse() getJSONResponse() parseXmlContent()parseXMLContent()
• Valid variable name:,,, var isGoodName; var base64Encoder var xmlReadervar httpServer

4. Properties Property

• Consistent with member variables
• If it is a constant

Ext.MessageBox.YES = "Yes"Ext.MessageBox.NO = "No"MyCompany.alien.Math.PI = "4.13"

Iii. hands-on Practice 1. Declaration Statement 1.1 The old way

If you have used ExtJS 3 or earlier, you may be familiar with ext.extendand can be used to create a class

1

var MyWindow = Ext.extend(Object, { ... });

This method can easily declare a class and inherit from another class, but it also has a flaw

1

My.cool.Window = Ext.extend(Ext.Window, { ... });

In this example we need to define the class in the namespace and inherit from the Ext.window class, but there are two problems:

1. My.coolMust have been defined before, this namespace must already exist
2. Ext.WindowMust already be loaded

The first rule can usually be Ext.namespace solved using (with Ext.ns ), this method will create a namespace that does not exist, the boring thing is you have to remember to Ext.extend add this sentence before

Ext.ns(‘My.cool‘);My.cool.Window = Ext.extend(Ext.Window, { ... });

The second problem is that the previous version of ExtJS4 does not solve the dependency problem, so it is usually introduced ext-all.js in 1.2 new ways

ExtJS 4 eliminates these drawbacks, just remember one method: Ext.define The basic syntax is as follows

Ext.define(className, members, onClassCreated);

• classNameThe name of the class to declare
• membersAn object that contains the class member
• onClassCreatedAn optional callback function, because the new asynchronous loading mechanism, this callback function is useful, when all dependencies have been introduced, and the class is completely created, this function will be called

Example

Ext.define(‘My.sample.Person‘, {    name: ‘Unknown‘,    constructor: function(name) {        if (name) {            this.name = name;        }    },    eat: function(foodType) {        alert(this.name + " is eating: " + foodType);    }});var aaron = Ext.create(‘My.sample.Person‘, ‘Aaron‘);    aaron.eat("Salad"); // alert("Aaron is eating: Salad");

Note that creating a new My.sample.Person instance here uses a Ext.create() method that uses keywords to create an new instance ( new My.sample.Person() ), but is not recommended new and should be used as a Ext.create habit, as this can take advantage of the benefits of dynamic loading. For dynamic loading See my other tutorial ExtJS 4 get started 2. Configuration configurations (instance members)

ExtJS 4 introduces a special config attribute, which is pre-processed before the class is created Ext.Class and features:

• Configuration items are encapsulated, and other property methods of the class are not mixed together
• Getter and setter for automatically generated attributes
• Automatically generates a method apply that is apply called before the setter, can apply customize the behavior of the setter by means of the method, and if the apply method does not return a value, the setter will not work, see the example belowapplyTitle

Ext.define(‘My.own.Window‘, {   /** @readonly */    isWindow: true,    config: {        title: ‘Title Here‘,        bottomBar: {            enabled: true,            height: 50,            resizable: false        }    },    constructor: function(config) {        this.initConfig(config);    },    applyTitle: function(title) {        if (!Ext.isString(title) || title.length === 0) {            alert(‘Error: Title must be a valid non-empty string‘);        }        else {            return title;        }    },    applyBottomBar: function(bottomBar) {        if (bottomBar && bottomBar.enabled) {            if (!this.bottomBar) {                return Ext.create(‘My.own.WindowBottomBar‘, bottomBar);            }            else {                this.bottomBar.setConfig(bottomBar);            }        }    }});

This is how to use the above example

var myWindow = Ext.create(‘My.own.Window‘, {    title: ‘Hello World‘,    bottomBar: {        height: 60    }});alert(myWindow.getTitle()); // alerts "Hello World"myWindow.setTitle(‘Something New‘);alert(myWindow.getTitle()); // alerts "Something New"myWindow.setTitle(null); // alerts "Error: Title must be a valid non-empty string"myWindow.setBottomBar({ height: 100 }); // Bottom bar‘s height is changed to 100

3. Statics Static Members

Static members are statics set by property:

Ext.define(‘Computer‘, {    statics: {        instanceCount: 0,        factory: function(brand) {            // ‘this‘ in static methods refer to the class itself            return new this({brand: brand});        }    },    config: {        brand: null    },    constructor: function(config) {        this.initConfig(config);        // the ‘self‘ property of an instance refers to its class        this.self.instanceCount ++;    }});var dellComputer = Computer.factory(‘Dell‘);var appleComputer = Computer.factory(‘Mac‘);alert(appleComputer.getBrand()); // using the auto-generated getter to get the value of a config property. Alerts "Mac"alert(Computer.instanceCount); // Alerts "2"

Iv. Errors handling & Debugging error handling and commissioning

ExtJS 4 introduces a number of useful features to help with debugging and error handling

You can use Ext.getDisplayName() the Get function name, for example

1

throw new Error(‘[‘+ Ext.getDisplayName(arguments.callee) +‘] Some message here‘);

Ext.define()you can see the method name and the class name and the call stack in Safari or Chrome's console by throwing (throw) errors (error) in the defined class

ExtJS Class 4 System