EXT Core features introduction (ON)

Ext core in order to achieve lightweight, ext in the UI part and related data processing part of the elimination, only the DOM operations and traversal, Ajax, event processing, animation, templates, object-oriented mechanism and so on. 1 ext.element contains a lot of HTML tags in a Web page document, which in the DOM tree becomes a reformed htmlelement, making it easy to script references. Because of the differences in browser DOM operations, each framework builds a new class to manipulate and traverse the DOM tree in order to implement the cross-browser nature of the web framework, and the class that implements that functionality in the EXT framework is ext.element. The main methods of the Ext.element class can be summarized as follows: CSS styles manipulate DOM queries and traversal (for example: query,select,findparent) DOM Operations (for example: Createchild,remove) The size operation (for example: getheight,getwidth) 1.1 Gets the ext.element instance of the HtmlElement node in ext, The ext.element instance of the HtmlElement node can be obtained by the Ext.get method, with the following syntax:

var el=ext.get (EL);  El can be a node id,dom node or an existing element

Using Ext.get creates an instance of Ext.element, which can be used later in the reference. If you do not need to create this instance, just perform a one-time operation on the HtmlElement, you can use the Ext.fly method. The Ext.fly method does not create ext.element instances, but operates on a globally shared ext.element instance, with the following syntax:

Ext.fly (EL). GetHeight (); El can be a node ID, DOM node

If you want to assign a ext.element instance to a variable and then refer to it in subsequent code, be sure to use the Ext.get method instead of using the Ext.fly method. Because the ext.element instance of a globally shared may be modified by subsequent code, it will not eventually get the desired result, for example:

var el=ext.fly ("Id1");
Ext.fly ("Id2"). Hide ();
El.hide ();

The above code was intended to hide the HTML tag with the ID "ID1" and "Id2", but the second row has already modified the global shared instance, and the object of the El variable has become "Id2", so it is not possible to hide "id1" when the 3rd row is run. The ext.fly approach is primarily designed to reduce memory usage.
If you want to return only the HtmlElement object, you can use the Ext.getdom method, which has the following syntax format:

var el=ext.getdom (EL); El can be a node Id,dom node or an already existing element

When using Ext.element to manipulate the properties and methods of the DOM node itself, the following is wrong, and the reason for this error is that the Ext.element object is a Thmlelement object

var el=ext.get ("ElId");
El.innerhtml= "Hello World";

The correct wording is:

var el=ext.get ("ElId");
El.dom.innerhtml= "Hello World";

1.2 CSS style actionsThe ext.element provides the operation style method in 11 (1) AddClass: Adds a style to the element, using the following method:

Ext.fly (' ElId '). addclass (' elcss ');  Add only one style
ext.fly (' elId '). addclass ([' ElCss1 ', ' elCss2 ', ' ELCSS3 ']);  Add multiple Styles

(2) Radioclass: Similar to AddClass, the difference is that the method removes the same style class (3) Removeclass: Removes one or more style classes by referring to AddClass (4) Toggleclass: Style class switches. If the element already has a style class, executing the method removes the style class, or if it does not, increases the style class. (5) Hasclass: Check that element has been applied to the specified style class, using the following method:

if (Ext.fly (' elId '). Hasclass (' elcss '))
{
     //When class Elcss is applied
}

(6) Replaceclass: Replace a style class with the following methods:

Ext.fly (' ElId '). Replaceclass (' ElCss1 ', ' elCss2 ');  Replace ELCSS1 with style class ElCss2

(7) GetStyle: Returns a style attribute value for an element, using the following code:

var color=ext.fly (' ElId '). GetStyle (' color ');

(8) SetStyle: Set the style properties, using the following methods:

Set only one property value
ext.fly (' elId '). SetStyle (' Color ', ' #FFFFFF ');  
Set multiple property values
ext.fly (' elId '). SetStyle ({
   color: ' Red ',
   background: ' Yellow ',
   font-weight: ' Bold '
) });

(9) GetColor: Returns the color value of an element based on the transferred property, such as "Background-color", returns the background color. Whether the color is set using RGB or 3-bit hex, it is returned in 6-bit hexadecimal format. The predefined color names are returned by using the color values set by the predefined color notation. Use the following methods:

The background color is RGB (221,221,221)
var bgcolor=ext.fly (' ElId '). GetColor (' Background-color ');
Returns the "#dddddd"
//color for #ddd
var color=ext.fly (' ElId '). GetColor (' color ');
Returns the "#dddddd"
//color for yellow
var color=ext.fly (' ElId '). GetColor (' color ');
Return to "yellow"

(a) SetOpacity: Sets the opacity value of the element, using the following method:

Ext.fly (' ElId '). SetOpacity (. 5);
Ext.fly (' ElId '). SetOpacity (. 5,true); Use animation over
ext.fly (' elId '). SetOpacity (. 5,{duration:.35,easing: ' Easein '});  Transitions using the specified animation style

(one) Clearopacity: Clears the opacity settings for the element, using the following method:

Ext.fly (' ElId '). clearopacity ();

1.3 dom Query and traversalExt.element provides 13 kinds of DOM query and traversal methods, the following are the functions of these methods and how they are used: (1) is: To determine whether the current element matches the element selected by the selector, and how it is used as follows:

var el=ext.get (' ElId ');
if (el.is (' div.elcss '))
{
    //If match, code
}

(2) Findparent: Finds the parent node (containing the current node) that matches the selector starting from the current node. Note that this method returns the HtmlElement object by default, not the Ext.element object. If you need to return the Ext.element object, you need to set the third argument to true and use the following method:

var el=ext.fly (' ElId '). Findparent (' div ');
var el=ext.fly (' ElId '). Findparent (' div ', 4);  Navigates to the 4th-tier parent node
var el=ext.fly (' ElId ') on the current node. Findparent (' div ', null,true);

(3) Findparentnode: Finds the parent node that matches the selector from the current node, using the method referenced by the Findparent method. (4) Up: is the abbreviation of the Findparentnode method, but the method returns the Ext.element object, using the method please refer to findparent. (5) Select: Selects the child nodes under the current node by selector, the return value of the method is the Ext.compositeelement object, and the method is used as follows:

Ext.fly (' elId '). Select (' div ');
If the node you want to return is a Ext.element object, you need to set the 2nd argument to True
ext.fly (' elId '). Select (' div ', true);

(6) Query: Select the DOM node through the selector, which returns an array containing the DOM nodes, using the following method:

Ext.fly (' elId '). Query (' div ');
The above sentence can also use the following statements instead
of ext.query (' div ', ext.getdom (' elId '));

(7) Child: Returns a subnode of the current node through the selector, by default the Ext.element object is returned, and if the HtmlElement object needs to be returned, the 2nd argument needs to be set to true, using the following method:

Ext.fly (' elId '). Child (' div ');  Returns the Ext.element object
ext.fly (' elId '). Child (' div ', true);//Return HtmlElement object

(8) Down: By choosing to return a direct child node of the current node, this method is similar to the children method, except that the selector cannot contain the node ID, and the method can be used to refer to the parent method.
(9) Parent: Returns the parent node of the current node, using the following method:

Ext.fly (' ElId '). parent ();  Returns the Ext.element object
ext.fly (' ElId '). Parent (', true ');  Returns the HtmlElement object
ext.fly (' ElId '). Parent (' div ');  You can also select by selector

Next: Returns the next node in the same layer as the current node, except for the text. This method is used in a similar way to the parent method. (one) Prev: Returns the previous node in the same layer as the current node, except for the text. This method is used in a similar way to the parent method. Primary: Returns the first node in the same layer as the current node. This method is used in a similar way to the parent method. Last: Returns the final node at the same level as the current node. This method is used in a similar way to the parent method.

1.4DOM Operation(1) AppendChild: Append child nodes to the current node using the following method:

var el=ext.get (' ElId1 ');
Ext.fly (' ElId '). appendchild (' elId1 '); Append
ext.fly (' ElId ') by ID. appendchild (EL);  As with the previous sentence, the
ext.fly (' elId ') is appended by ext.element. appendchild ([' elId1 ', ' elId2 ']);  Add
ext.fly (' elId ') through the array. appendchild (el.dom);//Append
htmlelement (' Ext.fly ') through ElId. AppendChild (Ext.select ( ' div '));  Append via Compositeelement

(2) Appendto: Appends the current node to a node, using the following method:

var el=ext.get (' ElId1 ');
Ext.fly (' ElId '). Appendto (' elId1 '); Append
ext.fly (' ElId ') by ID. Appendto (EL);//As with the previous sentence, append through ext.element

(3) InsertBefore: Before inserting the current node into a node. Use the method to refer to the Appendto method. (4) InsertAfter: After inserting the current node into a node. Use the method to refer to the Appendto method. (5) Insertfirst: Inserts a child node in the current node and acts as the first child node of the current node. (6) Replace: Replaces a node with the current node. Use the method to refer to the Appendto method. (7) ReplaceWith: Replace the current node with an existing node or a new node. Its use method can refer to Insertfirst method. (8) Createchild: Inserts 1 new nodes defined by Domhelper at the current node or before the specified node. Use the following methods:

var el=ext.get (' ElId ');
var c={
  tag: ' Div ',
  cls: ' box ',
  html: ' Hello '
};
Append a child node
el.createchild (c);
Inserts a
el.createchild (C,el.first ()) Before the first child node;

(9) Wrap: Binds a parent node that has Domhelper created outside the current node. Use the following methods:

Suppose ElId's HTML code is: <div id= ' elId ' >test</div>
ext.fly (' elId '). Wrap ();
After executing the above code, the HTML code becomes:
//<div id= "randomly created IDs" ><div id= "elId" >test</div></div>
Ext.fly (' elId '). Wrap ({
  tag: ' P ',
  ID: ' ELID1 ',
  HTML: ' Test '
});
After execution the HTML code becomes:
//<p id= "elId1" >new test<div id= "ElId" >test</div></p>

(Ten) Inserthtml: Inserts HTML code at the current node. The method needs to specify the insertion position (Beforebegin, BeforeEnd, Afterbegin, and Afterend). The method returns the HtmlElement object by default, and if you need to return the Ext.element object, you need to set the 3rd argument to True. How it is used and where it is inserted is described as follows: Suppose the current HTML code is as follows:

<ul id= "ElId" >
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ Ul>

Execute the following code (the location is "Beforebegin"):

Ext.fly (' ElId '). inserthtml (' Beforebegin ', ' <p> insert Code </p> ');

The result will be the following code:

<p> Insert Code </p>
<ul id= "ElId" >
  <li>1</li>
  <li>2</li>
  <li>3</li>
<ul>

If you execute the following code (the location is "Afterbegin"):

Ext.fly (' ElId '). inserthtml (' Afterbegin ', ' <p> insert Code </p> ');

The result will be the following code:

<ul id= "ElId" >
  <p> inserted code </p>
  <li>1</li>
  <li>2</li>
  <li>3</li>
<ul>

Remove: Deletes the current node. Use the following methods:

Ext.fly ("ElId"). Remove ();

(Removenode): Deletes a node in the DOM tree. Use the following methods:

Ext.removenode (node); Node is a HtmlElement object

(a) Load: Use AJAX to invoke Remote Data Update node content. Use the following methods:

Ext.fly (' elId '). Load ({URL: ' test.aspx '});

(Getupdater): Returns the Ext.updater object for the current node. Use the following methods:

var u=ext.fly (' ElId '). Getupdater ();
Update the node content
u.update ({
   URL: ' test.aspx '
}) through the Update method;