Reference extjs 2.0 Study Notes (ext. JS)

Research tools: dreamweave CS3 (the extjs 2.0 plug-in cannot be installed), Aptana (a benefit, good-looking code, matching with brackets, JSON syntax is good, that is, there are more brackets, find out where to end)

We found that extjs code is most like to be defined using JSON syntax, and classes are basically defined using JSON syntax. Instead of XX. Prototype. yyyy = function () {…} on the road outside (){......}. However, this syntax is quite clear. I like it.

Extjs has only one class: EXT, which is a static class. Provides frequently used functions.

Ext. Apply = function (O, C, defaults ){
If (defaults ){
// No "this" reference for friendly out of scope CILS
Ext. Apply (O, defaults );
}
If (O & C & typeof c = 'object '){
For (var p in c ){
O [p] = C [p];
}
}
Return O;
};

This is the apply function, which is equivalent to cloning. It copies all the members in Object C to O. If defaults exists, it also copies its content to O. This actually reveals a javascript Syntax:

The object member in Javascript has two reference methods:

I. O. propertyname

Ii. O [propertyname]

The key to this code is O [p] = C [p]. This should be understood. However, you cannot do this as follows:

VaR newelem = new object ();
Ext. Apply (newelem, ext. getdom ("A1 "));
Ext. getdom ("form1"). appendchild (newelem );

 

The following code is a large part. Since DW is not easy to read, it takes only half a day to know that it is a function (){...... Ext. Apply (EXT ,{......}}) (). This is my summary. This is a bit awkward. The author's intention is to put all the relevant sections in brackets to avoid confusion in understanding. Understandable. However, this method is not very popular.

 

Applyif: function (O, C ){
If (O & C ){
For (var p in c ){
If (typeof o [p] = "undefined") {o [p] = C [p];}
}
}
Return O;
}

This is the applyif code. In fact, there is a problem with its description in the document. It should be that when both O and C objects exist, the o does not exist, the attributes in C are copied to o without changing the attribute name. This is not the saying that "copying an attribute to o if o does not exist. In addition, to determine whether an object exists, the most rigorous method is to use typeof.

 

Addbehaviors: function (o ){
If (! Ext. isready ){
Ext. onready (function (){
Ext. addbehaviors (O );
});
Return;
}
VaR cache = {};
For (var B in O ){
VaR parts = B. Split ('@');
If (parts [1]) {// for object prototype Breakers
VaR S = parts [0];
If (! Cache [s]) {
Cache [s] = ext. Select (s );
}
Cache [s]. On (parts [1], O [B]);
}
}
Cache = NULL;
}

This is cleverly dependent on Ext. isready. This attribute should be set to true in the first line of onload. It is used to indicate whether the document model has been loaded. If the DOM model has not been fully loaded and is not ready, the event registration code is handed over to onload. That is, ext. onready.

If the DOM model has been loaded, register the event immediately. The difference is that the former is delayed registration, and the latter is registered immediately. Why delay? Because Dom is not completely created and some elements do not exist in the DOM tree. Of course, it cannot be set. For the rest, the key is Ext. Select.

 

ID: function (El, prefix ){
Prefix = prefix | "ext-gen ";
El = ext. getdom (EL );
VaR id = prefix + (++ idseed );
Return El? (EL. ID? El. ID: (El. ID = ID): ID;
}

Here is a tip: prefix = prefix | "ext-gen", which is the simplest code. Originally, an if statement is required.

 

Extend and namespace functions are hard to understand, so I will study them again when the water level is high.

 

The source code of urlencode is simple, but I still cannot write it so clearly, mainly because there are many situations. Here, I learned how to push the array. I thought that push could only pass one parameter, but I didn't expect to pass multiple parameters at a time. It is found that arrays are often used to construct a complex string. Urlencode is used to encode a JSON object into a query string.

Each: function (array, FN, scope ){
If (! Ext. isarray (array )){
Array = [array];
}
For (VAR I = 0, Len = array. length; I <Len; I ++ ){
If (fn. Call (scope | array [I], array [I], I, array) === false) {return I ;};
}
}

The function is not as simple as its name. I learned it again:

1. The original single element array can be written as follows: a = [A].

2. Scope is the default pseudo-caller here, and the current array element values, serial numbers, and array references are also passed. This may be used in fn. Note.

Note the statement X = false. You Need To Know undefined = false.

Callback: function (CB, scope, argS, delay ){
If (typeof cb = "function "){
If (Delay ){
CB. Defer (delay, scope, argS | []);
} Else {
CB. Apply (scope, argS | []);
}
}
}

When is a function member called defer? Later I learned that defer was extended by extjs. Delay is a latency. To be honest, scope is not just a matter of words. It is not clear to read the code. In fact, the defer attribute exists in JavaScript. Used to modify the script element. It is indeed used to delay loading of the content in the script. For more information, see here.

Destroy: function (){
For (VAR I = 0, A = arguments, Len = A. length; I <Len; I ++ ){
VaR as = A [I];
If (){
If (typeof as. Destroy = 'function '){
As. Destroy ();
}
Else if (as. DOM ){
As. removealllisteners ();
As. Remove ();
}
}
}
}

This function is used to destroy objects. From the code, extjs encourages you to write destroy when necessary to create your own classes. Such as a large number of useless DOM elements. Here, destory is equivalent to an analytic constructor. The removealllistenners and remove functions are members of the Ext. Element class.

　　Removenode: isie? Function (){
VaR D;
Return function (n ){
If (N & N. tagname! = 'Body '){
D = d | document. createelement ('div ');
D. appendchild (N );
D. innerhtml = '';
}
}
} (): Function (n ){
If (N & N. parentnode & N. tagname! = 'Body '){
N. parentnode. removechild (N );
}
}

This Code clearly serves to delete a node. However, this code is a bit unacceptable. The most depressing reason is that if IE is used, how is the parameter n passed in? Because the function that is covered by the outside has no parameters, it would be nice if there are no parameters, the key is that the function outside has not passed the parameter to the function in the return, which can be passed in as well.

After some experiments and research, I found that it is not the function that the external function can pass parameters to. It is because that () is used well, such:

VaR do1 = function () {return function (n ){}}();

The key is to "self-call" the external function {} immediately, so that a result will be returned. The result is a function expression, and the parameter can be passed. Therefore, if the external function does not have (), the actual call must be written in the form of do1 () (3), and two parentheses are written .. I thought about this question for a long time and finally figured it out.

Createcallback: function (/* ARGs ...*/){
// Make ARGs available, in function below
VaR ARGs = arguments;
VaR method = this;
Return function (){
Return method. Apply (window, argS );
};
}

Callback. This function is a prototype extension of the function object. Therefore, all functions have this member. For example:

Function (){}

B = A. createcallback ();

B ();

Finally, B () executes the call of. Some people say that since calling B is equivalent to calling a, it is better to use it directly.

Function B () {A. Apply (window, this. argments );}

Indeed, this can indeed achieve almost the same purpose, but you should pay attention to encapsulation when writing code. Although there is only one line of code, createcallback is much more friendly than apply, and it saves a lot of characters, which saves bandwidth.

When is the callback? Why is it not defined in the caller for calls by others? Because only defined in others can obtain others' information.

Of course, I still learned a little here. I didn't realize how to pass this in the outer layer to the function in the inner layer. You only need method = This.

Some ext functions are not defined in Ext. js. For example, ext. onready, ext. Reg, ext. Select, and Ext. query.