"ExtJS" various methods of acquiring element components

Source: Internet
Author: User

1, get (), GetDOM (), getcmp (), GetBody (), Getdoc ():

 Get (Id/obj):

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 creates a corresponding element object for each DOM, which can be passed through the element object method to implement the actions specified on the DOM, such as hiding elements with the Hide method, INITDD methods to allow 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.

 GetDOM (id/obj):

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.



The getcmp method is used to obtain an ext component, with only one parameter in the GETCMP method, which is the ID of the component.

 GetBody ():

Gets the body node element of the document.


 Getdoc ():

For the ext element (element) corresponding to document, the Getdoc method essentially gets the current HTML document object, which is the Element object that encapsulates the document object as a ExtJS.

2, Ext.compoentquery:

EXT JS 4 uses a new helper class (Ext.componentquery) to get ExtJS components using a selector similar to the Cssxpath style.

The main method of the Ext.componentquery class is query (). It receives a selector string of type Css/xpath and then returns an array instance that matches the ext.component (or its subclasses).

. query ( String selector, Ext.container.Container root)


String Selector Filtering rules

Ext.container.Container root is optional, queries within the root container, and if omitted, searches within the document.


1. Get the component by Component ID: "#组件ID", if this is the case, be sure to remember to add the # number before the component ID.

var userspanel = Ext.ComponentQuery.query (' #usersPanel ');

2. Get all the specified types of components under a component: "Panel>button", which is to find all the button components under All panel components.

var Validfield = Ext.ComponentQuery.query (' form > Textfield{isvalid ()} ');

3. If you want to get all the buttons and the action is the button for save, you can use "button[action=save." or get all the panel, and the AutoScroll property is true for the panel, you can use the " Panel[autoscroll=true] "

var Savebutton = Ext.ComponentQuery.query (' button[action= "Saveuser"] ");

3, Up () and Down ():

  Up (String selector, [number/mixed maxDepth]): Ext.core.Element

Selector: required, in string form, representing the component to match.

Maxdepth: Optional, indicating the maximum depth to match.

With a simple selection, the matching DOM is obtained, and using the UP method always returns a Ext.core.Element, which is the component of Ext.

Down (String selector, [Boolean returndom]): htmlelement/ext.core.element

Selector: required, in string form, representing the component to match,

Returndom: Optional, Boolean type, if True, returns a DOM node instead of Ext.core.Element. The value defaults to False.

4, FindField ():

Find specific Ext.form.field.Field within a form by ID or name.

Formpanel.getform (). FindField (' Id/name ');

Here's a summary:

Three ways to get field from a form:

EXT.GETCMP (' id ')

FormPanel.getForm.findField (' Id/name ')

Ext.get (' id/name ')//If the Formpanel is displayed on the interface.

The right to record, if there are errors and omissions, in the future to fill ...

"ExtJS" various methods of acquiring element components

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.