[Add to favorites] the differences among get, getDom, getCmp, getBody, and getDoc in Ext

Ext contains several methods starting with get. These methods can be used to obtain the DOM in the document, obtain the components in the current document, and obtain the Ext element. Pay attention to the difference in usage.

 

1. get Method

The get method is used to obtain an Ext element, that is, the type is Ext. object of Element, Ext. the Element class is Ext's DOM encapsulation, which represents the DOM elements. You can create an Element object for each DOM, and you can use methods on the Element Object to perform operations specified on the DOM, for example, the hide method can hide elements and the initDD method can make the specified DOM have the drag-and-drop feature. The get method is short for Ext. Element. get.

The get method has only one parameter. this parameter is a hybrid parameter, which can be the id of a DOM node, an Element, or a DOM Node object.

See the following sample code:

Ext. onReady (function (){

Var e = new Ext. Element ("elementId ");

Alert (Ext. get ("elementId "));

Alert (Ext. get (document. getElementById ("elementId ")));

Alert (Ext. get (e ));

});

The Html page contains a div with the id of 'elementid'. The Code is as follows:

<Div id = "elementId"> a test </div>

The following three methods can obtain an Ext element corresponding to the DOM node hello.

Ext. get ("elementId ");

Ext. get (document. getElementById ("elementId "));

Ext. get (e );

 

2. getCmp method-obtain the Ext component.

The getCmp method is used to obtain an Ext Component, that is, a Component or its subclass object initialized on the page. The getCmp method is in short form of the Ext. ComponentMgr. get method. The getCmp method has only one parameter, that is, the component id. For example, the following code:

Ext. onReady (function (){

Var h = new Ext. Panel (

{

Id: "elementId ",

Title :"",

RenderTo: "hello ",

Width: 300,

Height: 200

});

Ext. getCmp ("elementId"). setTitle ("New title ");

});

In the code, we use Ext. getCmp ("elementId") to obtain the component whose id is 'elementid' and call its setTitle method to set the title of the Panel.

 

3. getDom method-Get DOM nodes

The getDom method can get the DOM nodes in the document. This method contains a parameter, which can be the id of the DOM node, the DOM Node object, or the Ext Element (Element) corresponding to the DOM node. For example, the following code:

Ext. onReady (function (){

Var e = new Ext. Element ("elementId ");

Ext. getDom ("elementId ");

Ext. getDom (e );

Ext. getDom (e. dom );

});

Html code: <div id = "elementId"> a test </div>

 

In the above Code

Ext. getDom ("elementId ");

Ext. getDom (e );

Ext. getDom (e. dom );

The three statements are returned by the same DOM Node object.

 

4. getBody method-get the Object body node Element)

This method is used to directly obtain the document and document. the ExtJS Element corresponding to the DOM node "body" is essentially the document. the body object is encapsulated into an ExtJS Element Object and returned. This method does not contain any parameters. For example, the following code directly renders panel h to the body element of the document.

Ext. onReady (function (){

Var h = new Ext. Panel ({title: "test", width: 300, height: 200 });

H. render (Ext. getBody ());

});

 

5. getDoc method-get the Ext Element (Element) corresponding to the document)

The getDoc method essentially encapsulates the current html document object into an ExtJS Element Object and returns it without any parameters.