Reference extjs 2.0 Study Notes (element. JS)

The element. js file contains the most core part of the entire extjs framework. It encapsulates DOM elements in a strong way. There are 3054 lines of source files. Although there are many comments in the middle, I could not imagine that I would take thousands of lines of JS files for research a month ago. Haha.

As far as I know, the Ext. Element class includes at least the following functions:

　　1. Create an animation for many Dom actions, such as setwidth, which provides an option to get the animation effect

2. Provide a great load method. you can load data asynchronously by using ELE. Load ({URL: XXXXX. Awesome and cool.

I don't know about other features. This is a rough image of someone else's tutorials. If you want to obtain a rough image for it, click here to access relevant resources! With this resource, you can almost write programs.

If you don't talk much about it, you should study the source code.

　　I. Ext. Element caching mechanism

Ext. Element = function (element, forcenew ){
VaR dom = typeof element = "string "?
Document. getelementbyid (element): element;
If (! Dom) {// invalid ID/Element
Return NULL;
}
VaR id = Dom. ID;
If (forcenew! = True & ID & Ext. element. cache [ID]) {// Element Object already exists
Return Ext. element. cache [ID];
}

This. DOM = Dom;

This. ID = ID | Ext. ID (DOM );
};

Ext. element provides a caching mechanism to improve performance. Principle: allow the construction of Ext. element is stored in a JSON object. If you want to obtain this object again, you do not need to construct it again. You only need to retrieve it from the cache. The principle is simple.

The above function is the Ext. Element constructor, where forcenew indicates whether to force the creation of a new object, regardless of whether the cache already exists. This constructor also forces the generation of IDs for elements.

Where is the cache definition? There is a line of code at the end of the Code: El. cache ={}; visible, the cache is global. This is inevitable. Let's look at the most commonly used functions. Ext. element. Get. This function has more than 40 lines of code, because the entire function may have several types of input parameters, so there are more cases.

　　Ii. What is the use of Ext. Fly?

Ext. element has a static member fly. It is also an instance for obtaining an Ext. flyweight object. Of course, it is also the packaging of elements. Please refer to the Code:

VaR flyfn = function (){};
Flyfn. Prototype = El. Prototype;
VaR _ CLS = new flyfn ();

// Dom is optional
El. flyweight = function (DOM ){
This. DOM = Dom;
};

El. flyweight. Prototype = _ CLS;
El. flyweight. Prototype. isflyweight = true;

Check the code? It can be said that flyweight is inherited from the element. However, as its name suggests, it is lightweight. Why? See the fly code:

El. Fly = function (El, named ){
Named = named | '_ global ';
El = ext. getdom (EL );
If (! El ){
Return NULL;
}
If (! El. _ flyweights [named]) {
El. _ flyweights [named] = new El. flyweight ();
}
El. _ flyweights [named]. DOM = El;
Return El. _ flyweights [named];
};

The key to this Code is that it will always get the same flyweight object. When using fly to retrieve the object, as long as the named is not passed, all the retrieved objects will be the same. Instead, it will only change the Dom.

Some people ask what are the advantages of this? The advantage is big. If there are 1000 elements, you need to call their hide to hide them. If Ext. get will create 1000 element objects. If fly is used, only one object will be created. This greatly improves the performance. Therefore, it is better to use fly for batch operations.

　　3. Question element. findparent and element. findparentnode !!

Originally, I thought it was looking for objects that did not include myself. I always thought there was no result. Originally, these two functions were found by myself. If one element is Div, if it uses findparent to find the DIV ancestor, it always finds itself.

This problem is solved. However, I have doubts about findparent code, which uses Ext. getdom (maxdepth) is used to obtain the node at the maximum level. In fact, if I pass the getdom into a number, only the number itself will be returned, and no element will be returned at all. I have never understood this problem. However, this does not affect the functionality on the surface. Only setting maxdepth is equivalent to setting it in white.

　　Iv. Element animation support

There are three main types of methods for element to use animation.

1. Directly call the animate function of Ext. element, which is based on the Ext. Lib. anim class, while Ext. Lib. anim is the class in the adapter.
2. When you call some settings of Ext. element, such as size, position, range, and passthrough time, those functions usually have a parameter, anim. You can also set it to get the animation effect.
3. Call the method inherited from the Ext. FX class. If the page contains Ext. FX, you can use all functions defined in Ext. FX.

Generally, the following two methods are used. Unexpectedly, ext. Element inherits Ext. FX. Where is the code? At the end of Ext. FX, there is a line of code like this:Ext. Apply (ext. element. prototype, ext. FX );In this way, you can use special effects in the element. This is not the focus of research on the use of animations for elements. This Ext. FX article is to be studied. If you are eager to solve this problem, click here to read relevant references!

　　5. Set the location, size, absolute location, relative location, and other functions for positioning and range.

This is a big problem. In fact, I focused on this issue the previous week, for example:

1. How to obtain the coordinates relative to the positioning container
2. Obtain the coordinates relative to the page document.
3. How to obtain the element size, including the border, inner margin, and actual content
4. How to obtain the coordinates (offset) relative to the element)
5. How to get the size of a view
6. How to get the horizontal and vertical scrolling distance of the current document
7. How to obtain the coordinates of the current element relative to the upper left corner of the View

There are many problems. These problems usually require these quantities for computing, but these quantities are seriously related to the browser type. Different browsers use different methods. Trouble and headache. Fortunately, ext. element is encapsulated for this issue. Don't bother us. Of course, the above is just a result, and there is also the problem of setting these quantities, which should be at least fifteen or six functions. Ext. element is an English document, which makes our understanding difficult. Next we will find out these things. Now, I think of Asp.net Ajax again. This is a bit inferior to extjs. In Asp.net Ajax, a tiny bit of things is encapsulated. The domelement in it is equivalent to the element, but the functions are completely incomparable. Only create, addclass, removeclass, toggleclass, none of the seven questions I raised above have been resolved. This framework is similar to another one. If a brother is using Asp.net Ajax, it is best to change it. No one should use Asp.net Ajax.