ExtJS learning ---------- Ext. Dom. Query Class Learning (instance), extjsquery

ExtJS learning ---------- Ext. Dom. Query Class Learning (instance), extjsquery

Specific instance:

Ext. onReady (function () {// Ext. domQueryExt. create ('ext. panel ', {title: 'ext. domQuery example ', width: 500, height: 400, renderTo: Ext. getBody (), html: '<ul> <li> item1 </li> <li> item2 </li> </ul> <div id = d1> <span id = sp> I am sp content </span> <span class = mycolor> I am the second span </span> </div> '}); // Ext. domQuery. select = Ext. query // returned content: HTMLElement [] // Ext. domQuery. jsSelect: selects elements based on the selector (this method and Ext. domQuery. select) // I divide it into three categories: // basic selector id selector c Ss class selector label selector (simple selector) // attribute selector, pseudo-class selector (also known as JQ filter selector) // element selector // Ext. query ('span ') returns the span tag of the entire document (in array form) // 1 Ext. query ('span ', 'root') query based on the following node // var arr = Ext. query ('span ', 'd1'); // query by specifying the parent node // Ext. array. each (arr, function (el) {// traverse the query results // alert (el. innerHTML); //}); // id selector // 2 Ext. query ('# id') queries by id, but returns an array // var arr = Ext. query ('# d1'); // Ext. array. each (arr, function (el) {// alert (el. innerHTML );//}); // 3 Ext. query ('. class ') returns an array // var arr = Ext. query ('. mycolor'); // Ext. array. each (arr, function (el) {// alert (el. innerHTML); // result: I am the second span //}); // The style in the jsp file // <style type = "text/css"> //. mycolor {color: green;} // </style> // Ext. query ('*') matches all elements // alert (Ext. query ('*'); // complex selector: // 1: Ext. query ('div span ') contains selector Filter Based on tags // var arr = Ext. query ('div [id = d1] span '); // you can add restrictions. Otherwise, all the query results are displayed. array. each (arr, function (El) {// alert (el. innerHTML); // result: I am the sp content, and I am the second span //}); // 1.1: Ext. query ('e> F') to find the F node whose parent node is E // var arr = Ext. query ('div> span '); // Xpath: div/span it is more practical to search for xml files. // Ext. array. each (arr, function (el) {// alert (el. innerHTML); //}); // 2: attribute selector Ext. query ('e [attr = val] ') for an attribute Selection Match // var arr = Ext. query ('div [id * = d] '); // you can find all IDs containing d. // * Indicates inclusion. ^ indicates the first half; $ indicates the second half. // Ext. array. each (arr, function (el) {// alert (el. id); //});/* select the element :* All E> F or E/f e sub-elements with F tags in any element E with an E tag all elements with F tags following the elements with E tags E ~ F. Select all the element attributes with the F tag following the sibling element with the E tag: '@' and reference are optional. for example, div [@ foo = 'bar'] is a valid attribute selection. E [foo] has an attribute "foo" E [foo = bar] and an attribute "foo" is equivalent to "bar" E [foo ^ = bar] and has an attribute "foo" E [foo $ = bar] starting with "bar" has an attribute "foo". E [foo * = bar] ending with "bar" has an attribute "foo" including the sub-string "bar" E [foo % = 2] has an attribute "foo" which can be divisible by 2. E [foo! = Bar] There is a property "foo" which is not equivalent to "bar" pseudo class: E: first-child E is the first child of the parent class E: last-child E is the last child of the parent class E: nth-child (_ n _) E is the nth child of the parent class (in the unit of 1) E: nth-child (odd) E is an odd number of children in the parent class. E: nth-child (even) E is an even number of children in the parent class. E: only-child E is the only child of its parent class. E: checked E is an element with a check property (for example, a radio or checkbox). E: in the first result set, the first E: last E: nth (_ n _) result set, the nth E (1 is the benchmark) E: odd shortcut: nth child (odd digit) E: even shortcut: nth child (even digit) E: contains (foo) e's innerHTML contains the sub-string "foo" E: nodeVa Lue (foo) E contains a text node, and the node value is equal to "foo" E: not (S). E: has (S), an Eelement that does not match the simple selector S) an Eelement with a subset that can match with the simple selector S: next (S) the next sibling element is an Eelement that matches the simple selector S: prev (S) the first sibling element is the E: any (S1 | S2 | S2) matching the simple selector S and any simple selector S1, select the CSS value of an Eelement matching S2 or S3: E {display = none} css value "display" is equivalent to "none" E {display ^ = none} css value "display" E {display $ = none} the css value "display" is the E {display * = none} css value ending with "none" "display" contains the sub-string "none" E {display % = 2} css value "di Splay "is an E {display! = None} the css value "display" is not equivalent to "none" * // 3: pseudo class selector // E: first-child // var arr = Ext. query ('li: first-child '); // filter all li addresses and select the first. // Ext. array. each (arr, function (el) {// alert (el. innerHTML); // result: item1 //}); // Ext. other DomQuery Methods: // 1: compile the selector or xpath into a reusable function // var fn = Ext. domQuery. compile ('span '); // alert (fn); // var arr = fn (Ext. getDom ('d1 '); // Ext. array. each (arr, function (el) {// alert (el. innerHTML); //}); // 2: filter: Use a simple selector to filter element arrays. // The parameter description HTMLElement [] el, String selector, boolean nonMatches // var arr = document. getElementsByTagName ('div '); // var filterarr = Ext. domQuery. filter (arr, 'div [id = d1] ', false); // true: false by default. array. each (filterarr, function (el) {// alert (el. id); //}); // is: determines whether the element matches the simple selector // alert (Ext. domQuery. is (Ext. getDom ('d1 '), 'div [id]'); // checks whether the retrieved Dom element is a div containing an id. // The result is true });

EXTJS learning methods and experience

There seems to be no classic video!

Purchase a book and read extjs.

In addition, let's take a look at the Ext Core manual.

First, you must understand its ideas and style.

Read more source code

Learn EXTJS

Haha, the landlord is the same as I did when I first learned ExtJS. It is indeed a little difficult to learn at the beginning. But that was the idea you had before you knew enough about the power of EXTJS.
"But most of the element la s on the EXTJS page are implemented by JS .. if you disable JS. so there is nothing like a page... this is one of the reasons why I have never learned EXTJS ,"
I don't quite support this sentence. I would like to ask which websites do not use JS or static pages?
Summary:
1. a good learning environment (I learned from myself when I was in the company, because the company needs to use this technology, so it puts pressure on me)
2. A good API (the English version is recommended, because you have to understand English for the latest IT technology)
3. Network Environment)
4. Have the habit of reading the source code (there are various code writing methods in the source code, and how to reuse components, etc ..)