ExtJS Learning--------ext.element Query Method Learning (example)

Specific examples: (experimental results can be copied code after the demonstration)

Ext.onready (function () {ext.create (' Ext.panel.Panel ', {//Create a panel title: ' My panel ', Width: ' 100% ', height:400, Renderto: Ext.getbody (), HTML: ' <div id=d1><span id=sp> I'm SP content </span><div id=d2> I'm D2 content </div> </div> ');//query system The most common method://ext.dom.element get fly Getdomvar D1 = ext.get (' D1 '); var sp = ext.get (' SP ');//Query system method://1 : Contains: Determines whether the element contains another element alert (D1.contains (SP)), Alert (d1.contains (' SP ')),//2:child: Selects the element that matches the selector from the immediate child element of the element ( Returns only one element, and cannot return an array), 2 parameters The second parameter is optional if true means that the htmlelement element var ch1 = d1.child (' span ') is obtained, and//ext.dom.elementalert ( Ch.dom.innerHTML) var CH2 = D1.child (' span ', true);//htmlelementalert (ch.innerhtml);//3:down: Select the child element of the element that matches the selector// Findparentnode, up: Finds the parent element of the element that matches the simple selector var ch1 = d1.down (' #d2 '); alert (Ch1.dom.innerHTML);//4:first: Select the first child element of an element// Last: Select the final child element of the element var F1 = D1.first (' div '); alert (F1.dom.innerHTML);//5:findparent: Finds the parent element of the element that matches the simple selector// Parent: Returns the element's parents as var = sp.findparent (' div '), alert (parent.innerhtml),//6:is: Determines whether the element matches the selector alert (d1.is (' div '));/7:next: Select the next element in the same layer of the element//prew: Select the element on the same layer as the previous element var next = Sp.next (); alert (next.dom.nodeName);//8:ext.query: Gets the element according to the selector ( Ext.dom.Element.query) var arr = ext.query (' span ', ' D1 ');//htmlelement[]ext.array.each (arr, function (item) {Alert ( item.innerhtml);}); /9:ext.select/ext.dom.element.select: Gets the collection of elements based on the selector//Returns the element collection: Ext.dom.CompositeElementLite (HTMLELEMENNT)/ Ext.dom.CompositeElement (Ext.dom.Element)//Parameter description: 3 parameters,//1:selector selector (do not use ID selector)//2: Returns the Collection Object (Boolean false: Ext.dom.CompositeElementLite true:Ext.dom.CompositeElement)//3: Specify the root node start lookup///parameter is false when var list1 = ext.select (' span ' , false, ' D1 ');//ext.dom.compositeelementliteext.array.each (List1.elements,function (EL) {alert (el.innerhtml);}); /parameter is true when var list2 = ext.select (' span ', true, ' D1 ');//ext.dom.compositeelementext.array.each (List2.elements, Function (EL) {alert (El.dom.innerHTML);});});

ExtJS Learning--------ext.element Query Method Learning (example)