How to receive points for free for a member on the Forum

Overview ExtJS4 has more than 300 classes. JavaScript is a prototype-driven language. The advantage of this language is that it is greedy 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... syntaxHighlighter. all ();

Overview
Ext JS 4 has over 300 classes.

JavaScript is a prototype-driven language. The advantage of this language is that it is greedy 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 = is not recommended

MyCompany. util. Base64 = available (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:

[Javascript]
MyCompany. data. CoolProxy
MyCompany. Application

MyCompany. data. CoolProxy
MyCompany. 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:

[Javascript]
MyCompany. form. action. AutoLoad

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:

[Javascript]
Ext. data. JsonProxy replaces Ext. data. JSONProxy
Replace MyCompany. util. HtmlParser with MyCompary. parser. HTMLParser
Replace MyCompany. server. Http with MyCompany. server. HTTP

Ext. data. JsonProxy replaces Ext. data. JSONProxy
Replace MyCompany. util. HtmlParser with MyCompary. parser. HTMLParser
Replace MyCompany. server. Http with MyCompany. server. HTTP

2) source file

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

Ext. util. Observable is saved in src/Ext/util/Observable. js
Ext. form. action. Submit is stored 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:

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

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:

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

My. cool. Window = Ext. extend (Ext. Window, {...}); there are two problems with this definition method:

1. The My. cool object must exist (defined using Ext. namespace (aliased by Ext. ns)

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

1.2) New Method

[Javascript]
Ext. define (className, members, onClassCreated );

Ext. define (className, members, onClassCreated); for example:

[Javascript]
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;
}
});

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?

[Javascript]
Var aaron = Ext. create ('My. sample. Person ', 'Aaron ');

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:

[Javascript]
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

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

 

3. Static

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

[Javascript]
Ext. define ('computer ',{
Statics :{
InstanceCount: 0,
Factory: function (brand ){
// 'Like' 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"

Ext. define ('computer ',{
Statics :{
InstanceCount: 0,
Factory: function (brand ){
// 'Like' 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 () to get the display name of the method. Usage:

 

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

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