[Extjs 4] Class System

Overview

Ext js 4 has over 300 classes.

Javascript is a prototype-driven language. The advantage of this language is that it is flexible and can be used in different ways. Different Code styles and technologies implement the same function. The disadvantage is that it is hard to predict, without a unified structure, and hard to understand, maintenance and reuse.

Object-Oriented programming requires a strong type, encapsulation, and emphasis on code standards. developers need to follow a lot of rules, and the code to be written is more likely to be predictable and scalable, scalable. But it is not dynamic or zero-active.

EXT JS4 combines the strengths of the two and avoids the weaknesses of the two.

Naming rules

The use of unified naming rules in the class, namespace, and file of the code library helps to make the code organized, structured, and readable.

1) Class

The class name only contains letters and numbers. Although the number character is allowed, the class name should not be used unless it is a technical term. Do not use underscores, hyphens, or other non-alphanumeric characters.

For example:

MyCompany.useful_util.Debug_Toolbar= "Not recommended

MyCompany.util.Base64Yes (base64 is a professional term)

Use the dot connector (.) to place the class into the namespaces of different packages. At least, all classes have a unique top-level namespace, such:

MyCompany.data.CoolProxyMyCompany.Application

The namespace on the top layer and actual class names are named by the camper method, while all others are in lower case, for example:

MyCompany.form.action.AutoLoad

Do not use ext as the top-level namespace during development (because ext itself uses this)

Abbreviations should be named using the camper method as much as possible: for example:

Ext. Data. jsonproxy replaces Ext. Data. jsonproxy mycompany. util. htmlparser with mycompary. parser. htmlparser mycompany. server. http to replace mycompany. server. HTTP

2) source file

The class name must correspond to the path of the defined source file. For example:

• Ext.util.ObservableSave it in src/EXT/util/observable. js
• Ext.form.action.SubmitSave it in src/EXT/form/Action/submit. js

3) methods and variables

The naming rules and class naming rules are identical.

4) attributes

Static constants all use uppercase letters, and others are named by the hump method, for example:

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

Instance

1. Statement

1.1) Old Method

In the earlier version of ext JS (3.0), use the following method to define the class:

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

There are two problems with this definition method:

1. The object my. Cool needs to exist (UseExt.namespace(AliasedExt.ns) Definition)

2. Ext. Window must be defined (or and imported)

1.2) New Method

Ext.define(className, members, onClassCreated);

For example:

Ext.define('My.sample.Person', {    name: 'Unknown',     constructor: function(name) {        if (name) {            this.name = name;        }         return this;    },     eat: function(foodType) {        alert(this.name + " is eating: " + foodType);         return this;    }}); 

In this way, the problems encountered in the old method will be solved.

Defines the type. How to create a new class instance?

var aaron = Ext.create('My.sample.Person', 'Aaron');

You can use Ext. Create instead of new my. sample. Person () to load data dynamically.

2. Configuration

New configuration features of ext JS 4 include:

1) complete configuration Encapsulation

2) The getter and setter methods are automatically generated for each configuration attribute.

3) The apply method is automatically generated for each configuration attribute. The automatically generated setter method calls the apply method before setting the value. If the apply method does not return a value, the setter will not set the value. For example:

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);         return this;    },     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);            }        }    }});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 

3. Static

You can use static to configure static members, for example:

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 ++;         return this;    }}); 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"

Error Handling and debugging

Ext js 4 provides some useful features for debugging and error handling.

Use Ext. getdisplayname ()The display name of the method. Usage:

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