Working with DOM:

Ext JS is a DHTML library. It creates the UI by creating or manipulating DOM elements using JavaScript. As you may know that not all browsers performs the same operation on DOM elements using the same JavaScript DOM manipulation methods. There are cross-browser issues associated with DOM creation and manipulation. To solve cross-browser issues, Ext JS includes following classes for creating or manipulating the DOM elements.

Class	Description
Ext.dom.Element	Main class in Ext JS that wraps single HTML DOM element. It includes DOM manipulating methods with normalizing cross-browser issues so that programmers do not have to worry about cross-browser issues.
Ext.dom.CompositeElement	It encapsulates a collection of HTML DOM elements. Includes methods to manipulate, filter, or perform specific action on the collection of DOM elements.
Ext.dom.Helper	It includes methods to create DOM elements using specified attributes like tag, children, cls, and html.
Ext.dom.Query	Allows us to search for the dom elements using CSS3 Selectors, it's own selectors and basic XPath query syntax.

Ext.dom.Element

Ext JS includes Ext.dom.Element class that wraps the actual HTML DOM element. Ext.dom.Element class includes methods to modify DOM element and also manages cross-browser issues. Ext.get() and Ext.fly() method returns an object of Ext.dom.Element.

Method	Description
Ext.get()	Returns an object of Ext.dom.Element for the specified id of existing DOM element.
Ext.fly()	Performs the same action as Ext.get(). It is designed to manipulate DOM element as a single statement and does not store a reference in a memory.

The following example demonstrates how to take a reference of DOM elements.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../ext-4.2.1/ext-4.2.1.883/ext-debug.js"></script>
        <script>
            Ext.onReady(function () {
                // get Ext.dom.Element object
                var txtFirst = Ext.get("txtFirstName");
                txtFirst.set({ 'value': 'Steve' });

                Ext.fly('txtLastName').set({ 'value': 'Jobs' });

                console.log(txtFirst.$className);
            });
    </script>
</head>
<body>
  First Name: <input type="text" id="txtFirstName" class="myclass"/> <br /><br />
  Last Name:  <input type="text" id="txtLastName" class="myclass" /> 
</body>
</html>

Try it on https://fiddle.sencha.com/#fiddle/s7q

In the above example, Ext.get() method returns an object of Ext.dom.Element for the input type whose id is "txtFirstName". You can then use various methods of Ext.dom.Element to manipulate DOM element, for example, set() method is used in the above example to set the input value. In the same way, Ext.fly() method is used to get the reference of DOM element and manipulate it in the same statement.

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

In the next section, learn how to create or manipulate composite elements.