Home > Developer > Web Develop
An object refers to a part of a page, such as input, and so on. I think in EXT JS there will be three types of basic objects, htmlelement, ext. Element and Compositeelement. Explain separately:
HtmlElement refers to the various markup elements of an HTML page, which can be obtained using document.getElementById (), with methods and properties of the HTML object.
EXT. Element is the most important Ext object, on the basis of DOM object, and wrapping a lot of methods and properties, can be obtained by Ext.get ().
Compositeelement is a set of Ext.element collection objects. This object is returned when the Ext.element object is obtained by fist (), Last (), item (), and then Ext.select () to select multiple objects
Here are some important ways to get the corresponding elements in the page:
1, the basic way to get htmlelement with JavaScript is: document.getElementById ()
2, Ext.get () to obtain the Ext.element object, the entry can be an ID or htmlelement, that is, through the ext.get () can be htmlelement packaging ext.element objects.
In addition, EXT. The DOM property of the element object can also get its corresponding HtmlElement object.
3. Ext.select () Gets the compositeelement based on the tag name or classname or wildcard character, and can then traverse the ext.element. EXT. Element.select () method call Domquery Library
Ext.select ("div");//Select All div
Ext.select (". Red");//Select all elements of classname as red
Ext.select ("div.red") selects all DIV elements that are classname red
Ext.select ("*"); Select all elements.
Ext.select ("#id"); Select an element by ID.
4.ext.query () is a shorthand for EXT.DomQuery.select (). Returns the HtmlElement array.
var a=ext.query ("div");
alert (a[0].innerhtml);
5.ext.getbody () returns the <body> tag as Ext.element
6.ext.getdoc () returns <HTML> as Ext.element.
There are four types of definitions for selector in select and query:
1. Element selector:
Ext.query ("span");
Ext.query ("span", "foo");
Ext.query ("#foo");
Ext.query (". Foo");
Ext.query ("*");
Ext.query ("div p");
2. Property selector:
Ext.query ("*[class]");
Ext.query ("*[class=bar]");
Ext.query ("*[class!=bar]");
Ext.query ("*[class^=b]");
Ext.query ("*[class$=r]");
Ext.query ("*[class*=a]");
3.CSS value Element selector:
Ext.query ("*{color=red}");
Ext.query ("*{color=red} *{color=pink}");
Ext.query ("*{color!=red}");
Ext.query ("*{color^=yel}");
Ext.query ("*{color$=ow}");
Ext.query ("*{color*=ow}");
4. Pseudo-Class selectors:
Ext.query ("Span:first-child");
Ext.query ("A:last-child");
Ext.query ("Span:nth-child (2)");
Ext.query ("input:checked");
Ext.query ("Div:contains (within)");
Ext.query ("Div:not (Form)");
Ext.query ("Td:next (TD)");
Ext.query ("Label:prev (input)");
Ext has several methods that begin with get, which can be used to get the DOM in the document, to get the components in the current document, to get the ext element, etc., and to be aware of the difference in use.
1. Get method
The Get method is used to get an EXT element, That is, an object of type Ext.element, the Ext.element class is an EXT-dom wrapper, representing the elements of the DOM, which can create a corresponding element object for each DOM, which can be specified by the method on the element object, such as using the Hide method to The hidden element, INITDD method allows the specified DOM to have drag-and-drop characteristics, and so on. The Get method is actually a shorthand form of Ext.Element.get.
There is only one parameter in the Get method, which is a mixed parameter, which can be the ID of the DOM node, an element, or a DOM node object. Look at the following sample code:
Three methods, such as Ext.get ("Hello"), Ext.get (document.getElementById ("Hello"), Ext.get (e), can get an EXT element corresponding to the DOM node hello.
2. The getcmp method is used to obtain EXT components.
The getcmp method is used to obtain an ext component, which is an object of component or its subclasses that have been initialized in the page, and the getcmp method is actually a shorthand form of the Ext.ComponentMgr.get method.
There is only one parameter in the GETCMP method, which is the ID of the component. Look at the following code:
We use EXT.GETCMP ("H2"). To get the component with ID H2 and call its Settitle method to set the caption of the panel
3. GetDOM Method-Get DOM node
The GetDOM method can get the DOM node in the document, which contains a parameter that can be the ID of the DOM node, the DOM node object, or the ext element (element) of the DOM node. For example, the following code:
In the above code, three statements, such as Ext.getdom ("Hello"), Ext.getdom (E), Ext.getdom (E.dom), and so forth, are all the same DOM node objects.
4. GetBody method-Gets the body node element of the document.
The method directly obtains the ExtJS element in the document corresponding to the DOM node of Document.body, which essentially encapsulates the Document.body object as a ExtJS element object, and the method takes no parameters.
For example, the following code renders the panel h directly into the BODY element of the document.
5. Getdoc Method-Obtains the EXT element corresponding to the document (element)
The Getdoc method essentially returns the current HTML document object, that is, the element object that encapsulates the document object as a ExtJS, without any parameters.
ExtJS getting DOM objects
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
