"EXTJS6 Study Notes" 1.12 initial: Working with DOM

Http://www.extjs-tutorial.com/extjs/working-with-dom

Ext JS is a DHTML library. It creates the UI by using JavaScript to create or manipulate DOM elements. As you might know, not all browsers do the same thing with DOM elements using the same JavaScript Dom action method. Cross-browser issues related to DOM creation and manipulation. To solve cross-browser problems, Ext JS contains the following classes to create or manipulate DOM elements.

Class	Description
Ext.dom.Element	Ext JS contains the main class of a single HTML DOM element. It includes DOM manipulation methods with canonical cross-browser issues so programmers don't have to worry about cross-browser issues.
Ext.dom.CompositeElement	It encapsulates a set of HTML DOM elements. Includes actions, filters, or methods that perform specific actions on a collection of DOM elements.
Ext.dom.Helper	It includes methods for creating DOM elements using the specified attributes, such as TAG,CHILDREN,CLS and HTML.
Ext.dom.Query	Allows us to search DOM elements using the CSS3 selector, which is its own selector and basic XPath query syntax.

In the example above, the Ext.get () method returns an Ext.dom.Element object with an ID of "txtFirstName". You can then use the various methods of Ext.dom.Element to manipulate DOM elements, for example, the set () method for setting input values in the example above. In the same way, the Ext.fly () method is used to get a reference to a DOM element and operate in the same statement.

Note: the Ext.fly () function is a more efficient way to manipulate DOM elements when you do not need to perform multiple operations on DOM elements. It is designed to operate more efficiently and to use less memory.

----------------------------------------------------------------------

A composite element of the Ext.dom.CompositeElement class wraps multiple Ext.dom.Element instances. It includes the method of manipulating these Ext.dom.Element instance groups in a single call so that we do not have to get a reference to each Ext.dom.Element and perform the same operation for each element individually.

You can use the Ext.select () method to retrieve a composite element. The Ext.select () method takes a CSS selector as a string parameter and returns an instance of Ext.dom.CompositeElement or Ext.dom.CompositeElementLite.

In the example above, Ext.select () returns the Ext.dom.CompositeElement that contains all the input elements. You can then manipulate all the elements in a single statement. The set () method sets the Style property of all selected elements.

You can select other elements by passing different CSS selectors to the Select () method and using the various methods of Ext.dom.CompositeElement.

----------------------------------------------------------

The Ext.dom.Helper class allows us to add new DOM elements, modify or delete existing DOM elements in an HTML document.

The Domhelper class uses JSON-based syntax with the following special properties to create a new DOM element.

 

EXTJS6 Learning Note 1.12 Initial: working with DOM