Ext JS 4–DOM Handling

ExtJS has core framework which helps in dom handling and event management.

The main class is Element class which is ExtJS wrapper around the dom nodes. There are ExtJS utilities to select and manipulate the Dom elements.

The Element class normalizes the DOM manipulation and provides positioning capabilities.

There are two way to get the Element

1. Ext.get(id)
2. Ext.fly(id).

Both method takes the id of element we are referring in the page. Lets see  a example

   
    
   
   



    
 ExtJS - Demos




    
 This is a h2 header

    Person Form
    

    

       First Name :  

       Last Name :  

       City Name :  

        
    

In the example above, we are trying to get the value of three text box defined. We are using Ext.get(‘fname’) to get the Element wrapper for fname textbox. We can add animation to using element.highlight() or frame(). All Element object have animation method added to it as Mixins. Let see the enhanced code, On click of button lets highlight the textboxes.

         fnameEl.highlight("0000ff", {
               duration : 2000
           });
           lnameEl.highlight("0000ff", {
               duration : 2000
           });
           cityEl.highlight("0000ff", {
               duration:2000
           });

The demo can be found here