ExtJs4 Learning (2): Dom document operations, extjs4dom

ExtJs4 Learning (2): Dom document operations, extjs4dom

Currently, the mainstream JS frameworks are widely used in ExtJs and JQuery. JQuery is lightweight and is common for website applications. It can be seen that it has the advantages of small blocks. ExtJs is relatively large. In addition to encapsulating basic JS syntax and html dom operations, it also provides a powerful UI library. Exclusive advantage in Enterprise B/S solution applications. Simply put, it is encapsulated in native JS, and DOM operation encapsulation is enough to despise JQuery. Next I will compare the APIs to reflect the similarities between the two frameworks. We have already taken JQuery API as the main line to see if ExtJs has an alternative solution.

Note: ExtJs4.0 is greatly changed compared with the previous version. This series of articles only support ExtJs4.0 and later versions.

I. selector 1. Context selector comparison

JS has frequent operations on HTML nodes. Therefore, you must often locate and query DOM elements. Let's look at the implementation of the two frameworks respectively.

Get the DOM element of Id = "div1:

[JQuery]

$("#div1");

[ExtJs]

Ext.get("div1");

In fact, Ext. get ("div1") is different from $ ("# div1"). The former gets only the first matching element, and the latter is a set of matching elements. The equivalent usage of ExtJs is as follows:

[ExtJs]

Ext.select("#div1");

The following is a complete comparison code:

[ExtJs]

// Ext. element class: The encapsulation of dom objects by ExtJs // Ext. compositeElement class: it is an element of ExtJs's encapsulation of the dom object set // query Id = div1, and returns the Ext of the First Matching Element. element type // This method can only query IDs, but does not support the selector Ext. get ("div1"); // The function is the same as Ext. fly ("div1"); // query the dom object of the element Id = div1 Ext. get ("div1 "). dom; // or Ext. getDom ("div1"); // obtain the Ext. element type Ext. getBody (); // returns the Ext. element type Ext. getDoc (); // query the element with Id = div1, and return the Ext. compositeElement type Ext. select ("# div1"); // query the div with the property title = d1, and return the Ext. compositeElement type Ext. select ("div [title = 'd1 ']"); // query the div with the property title = d1, and return the dom node set that meets the conditions Ext. query ("div [title = '1']");

2. Introduction to selector syntax

The JQuery selector supports the CSS3 selector. ExtJs also supports the basic XPath syntax. The following are the explanations:

1) CSS3 Selector

The commands listed below are in a single form and can be used in an unlimited combination.

Element selector:

Any element
• EAn element labeled as E
• E FBranch elements of all E elements contain elements labeled as F.
• E> FOrE/FThe immediate element of all E elements contains elements labeled as F.
• E + FAll elements whose labels are F and followed by the elements whose labels are E
• E ~ FAll elements labeled as F and labeled as E are side elements.

Attribute selector:

@ And quotation marks are optional. For example, div [@ foo = 'bar'] is also a valid attribute selector.

• E [foo]Has a property named "foo"
• E [foo = bar]It has an attribute named "foo" and its value is "bar ".
• E [foo ^ = bar]It has an attribute named "foo" and Its Value starts with "bar ".
• E [foo $ = bar]Property with the name "foo" and the value ending with "bar" = bar] has an attribute with the name "foo" and the value contains the string "bar ".
• E [foo % = 2]It has an attribute named "foo" and the value can be divisible by 2.
• E [foo! = Bar]It has an attribute named "foo" and its value is not "bar ".

Pseudo class:

• E: first-childE is the first child element of its parent element.
• E: last-childE is the last child element of its parent element.
• E: nth-child (N)Element E isNChild element (number starting from 1)
• E: nth-child (odd)E is a child element with an odd number of its parent elements.
• E: nth-child (even)E is a child element with an even number of its parent elements.
• E: only-childE is the unique child element of its parent element.
• E: checkedElement E has an element named "checked" and its value is "true" (for example, single-statement or check box)
• E: firstFirst E element in the result set
• E: lastLast E element in the result set
• E: nth (N)Result setNNumber of E elements (starting from 1)
• E: odd: Short for nth-child (odd)
• E: even: Short for nth-child (even)
• E: contains (foo)The innerHTML attribute of Element E contains the "foo" string.
• E: nodeValue (foo)The E element contains a textNode node and the nodeValue is equal to "foo"
• E: not (S)An E element that does not match the simple selector S
• E: has (S)An E element that contains the branch element that matches the simple selector S
• E: next (S)The next side element is the E element that matches the simple selector S.
• E: prev (S)The last side element is the E element that matches the simple selector S.

CSS value selector:

• E {display = none}The "display" attribute of css is equal to "none"
• E {display ^ = none}The "display" attribute of css starts with "none ".
• E {display $ = none}The "display" attribute of css ends with "none" and ends with "none". The "display" attribute of css contains the string "none"
• E {display % = 2}The "display" attribute of css can be divided by 2
• E {display! = None}The "display" attribute of css is not equal to "none"

2) XPath syntax

The following are examples:

/Html/body/div: Start from the root directory and find all the divs at the second layer of the body.

Div/div: match the DIV element in the full text and obtain all the sub-DIV sets containing the sub-DIV.

3. Differences between Ext. get and Ext. fly:

In layman's terms, they all play the same role and are all acquiring elements. However, the former generates an Ext. Element Object for each call to open up a new memory space, while the latter shares a public memory space. Each call will overwrite the previous information. Because Ext. Element is relatively large, it can save resources. If the Ext. Element you obtain does not need to be repeatedly called for a long time, it is more reasonable to use the latter. The following example shows their differences:

// Update div1var div1 = Ext. get ("div1"); Ext. get ("div2"); div1.update ("I want to update div1"); // replace get with fly .... // The updated version is div2var div1 = Ext. fly ("div1"); Ext. fly ("div2"); <pre name = "code" class = "javascript"> var e = $ ("div [title = t1]"); // returns the title attribute alert (e. attr ("title"); // set the title attribute e of the First Matching Element. attr ("title", "newTitle"); // remove the title attribute e of the First Matching Element. removeAttr ("title"); // CSS class // Add c2 style e to the First Matching Element. addClass ("c2"); // remove e. removeClass ("c1"); // reincarnation e. toggleClass ("c2"); // check whether the c2 style exists e. hasClass ("c2"); // Html // htmle.html (); // update htmle.html ("<B> updated Html </B>"); // value e. val (); e. val (1, 150 );

Div1.update ("I want to update div1 ");

We found that after Ext. fly is called again, DIV2 is updated, and the re-call of Ext. get does not affect the updated elements.

Ii. Attributes

Note: before several methods for CSS class operations change from earlier versions, they are: e. addClass ("c2 ")

[JQuery]

Var e = $ ("div [title = t1]"); // returns the title attribute alert (e. attr ("title"); // set the title attribute e of the First Matching Element. attr ("title", "newTitle"); // remove the title attribute e of the First Matching Element. removeAttr ("title"); // CSS class // Add c2 style e to the First Matching Element. addClass ("c2"); // remove e. removeClass ("c1"); // reincarnation e. toggleClass ("c2"); // check whether the c2 style exists e. hasClass ("c2"); // Html // htmle.html (); // update htmle.html ("<B> updated Html </B>"); // value e. val (); e. val (1, 150 );

[ExtJs]

Var e = Ext. select ("div [title = t1]"); // attribute // return the title attribute alert (e. first (). getAttribute ("title"); // set the title attribute e of the First Matching Element. first (). set ({"title": "newTitle"}); // CSS class // Add c2 style e to the First Matching Element. addCls ("c2"); // remove e. removeCls ("c1"); // reincarnation e. toggleCls ("c2"); // check whether the c2 style exists e. hasCls ("c2"); // Html // obtain Htmle. first (). dom. innerHTML; // update Htmle. first (). update ("<B> updated Html </B>"); // value: e = Ext. get ("text1"); e. getValue (); e. set ({value: 150 });

Iv. Filter [JQuery]

Var e = $ (". c1 "); // filter // obtain the Second Matching Element e. eq (1); // filter again. The dive of attribute title = t1. filter ("div [title = t1]"); // returns truee when parent node Id = div1. parent (). is ("# div1"); // find // obtain the first and last in the Set: e. first (); e. last (); // the first one, the last one: e. prev (); e. next (); // The first subnode and the last one: var e2 =$ ("# div1"); e2.children (). first (); e2.children (). last ();

[ExtJs]

Var e = Ext. select (". c1 "); // filter // obtain the Second Matching Element e. item (1); // filter again. The div of the property title = t1. elements that do not meet the conditions in the set are automatically removed from e. filter ("div [title = t1]"); e = Ext. select (". c1 "); // returns truee when the parent node Id is div1. first (). parent (). is ("# div1"); // find // obtain the first and last in the Set: e. first (); e. last (); // the first one of a single element, matching the last one of the selector: e. item (1 ). next ("div [title = t2]"); e. item (1 ). prev (); var e2 = Ext. get ("div1"); // obtain the first and last subnode: e2.first (); e2.last ();

V. Document Processing [JQuery]

// Insert var e = $ ("div. c1 "); // insert e. first (). append ("<B> new content </B>"); // insert e. first (). prepend ("<B> new content </B>"); // insert e. first (). before ("<B> new content </B>"); // insert e. first (). after ("<B> new content </B>"); // package e. eq (2 ). wrap ("<p> </p>"); e. eq (2 ). unwrap (); // Replace e. eq (2 ). replaceWith ("<B> replaced </B>"); // Delete e. eq (3 ). remove (); // clear the htmle In the tag. eq (0 ). empty ();

[ExtJs]

Var e = Ext. select ("div. c1 "); // insert html: e. first (). insertHtml ("afterBegin", "<B> new content </B>"); e. first (). insertHtml ("beforeEnd", "<B> new content </B>"); e. first (). insertHtml ("beforeBegin", "<B> new content </B>"); e. first (). insertHtml ("afterEnd", "<B> new content </B>"); // package e. wrap ({tag: 'P'}); // Replace the fifth element e in the set with text1. replaceElement (4, "text1", true); // Replace the div2 label e with the current element. first (). replace ("div2", true); // Delete e. first (). remove (); // remove the third element e. removeElement (2, true );

Vi. CSS [JQuery]

Var e = $ ("div1"); // set the sample e.css ("width", "550px" );e.css ("position", "absolute"); // set the height e. height (100); // obtain the width e. width ();

[ExtJs]

Var e = Ext. get ("div1"); // sets the style e. setStyle ("width", "550px"); e. applyStyles ({height: "500px", color: "red", position: "absolute"}); // sets the height with animation effect e. setHeight (100, true); // you can specify whether to locate e. setLeft ("50px"); e. setTop ("10px"); e. setLeftTop ("100px", "50px"); // set the size e. setSize ("100px", "200px"); // sets the xy coordinate e. setXY ([10, 10]); // obtain the width e. getWidth (); // obtain the coordinate e. getXY ();

VII. Event [JQuery]

Var e = $ ("# div1"); // event binding // bind a click event to the element: var clickhandler = function () {alert ("the click event is triggered! ") ;}; E. bind ("click", clickhandler); // simulate the click Event: e. trigger ("click"); // unbind the click Event e. unbind ("click", clickhandler); // event switching e. hover (function () {e.css ("background-color", "Red") ;}, function () {e.css ("background-color ", "Aqua ");});

[ExtJs]

Var e = Ext. get ("div1"); // event binding // bind a click event to the element: var clickhandler = function () {Ext. msg. alert ("message", "click event triggered! ") ;}; E. on ("click", clickhandler); // unbind the click Event e. un ("click", clickhandler); // event switching e. hover (function () {e. setStyle ("background-color", "Red") ;}, function () {e. setStyle ("background-color", "Aqua ");});

I am getting started with extjs. I am now learning how to use Extjs4. I would like to ask how extjs receives and parses json data.

JSON can be understood as a serialized string of JavaScript objects. After reading the JSON content, you will find that the object literal volume written in the Code is basically the same, therefore, you can use the eval method to convert JSON to an object.
Ext is just a simple eval encapsulation method to adapt to different standard JSON
Source code:
Ext. util. JSON. decode = function (json ){
Return eval ('+ json + ')');
};
You can see it by alert.

// Example
Ext. onReady (function (){
Ext. Ajax. request ({
Url: 'getmsg. action? User = 1 ',
Method: 'get ',
Success: function (resp, options ){
// Standard JSON string '{"data": [{"msg": "abcd"}]}'
Var jsonObj = Ext. util. JSON. decode (resp. responseText );
// Display the modal prompt box
Ext. Msg. alert ('title', jsonObj. data [0]. msg, function (btn ){
// Ext's modal window is very important because it only shields operations, does not block threads, and js does not have threads.
// Callback of the button event in the prompt box
Alert (btn); // then run
});
Alert (1); // execute first
}
// Failure: function () {...} // optional
});
});

Ext's ApiDoc is very good at learning. Do not read some so-called Chinese versions. There are many machine translations, and many unproofread errors.

In addition, to learn ExtJS, We need to master the concept of closure. This is a very important feature of js. Ext uses this feature to simulate inheritance and encapsulation, and to some extent implements object-oriented programming. of course, you can also ignore the Ext Inheritance Mechanism and use prototype of js itself)

Hello, please send me a copy (for more information, see Extjs411 (ExtJS component, ExtJS support for Ajax, ExtJS layout ).

Sorry, I don't have this resource here. You can search for it from the Internet, as if it was for money.