Ext.js - Dom Manipulation in Ext JS

These are the basic methods which Ext JS uses for fetching DOM elements:

1. Ext.get()

   This returns an object of the DOM element directly which is specified in HTML page.

   <div id = 'divId' />

   This div element is defined in a html page its value can be get using Ext.get('divId').

2. Ext.getElementById()

   This method is basically used to get Ext JS elements value using its Id, e.g. there is a grid defined as:

   Ext.define(appName.view.GridName , {
      Id = 'gridId',
      Other properties...
   });
   

   Gris is not a normal html element it's an Ext JS element so its value can be fetched using Ext.getElementbyId('gridId').

3. Ext.fly()

   This method works same as Ext.get() but the only difference is it is used when we want to change the value of the element in the same statement such as setting value of the element.

   Html code

   <input type = 'text' id = 'studentName'>
   

   This is a straight html element its value can be get using both Ext.get() and Ext.fly() but if we want to set the value of the element in the same statement we will use Ext.fly() As Ext.fly('studentName').set({'value' : 'John'});

4. Ext.select()

   This method is used to select multiple elements at a time unlike Ext.get() with which we can select only one element.

   Html code

   <div id = 'div1' class ='divClass' /> 
   <div id = 'div2' class ='divClass' />
   

   Here if we want to select both the div elements with Ext.get() we have to write two separate statements, but if we use ext.select() we can actually select both the elements in a single statement by selecting class selector as Ext.select('.divClass');

   We can use CSS selectors here.If we want to select using id we can use Ext.select('#div1 #div2');