O'Reilly logo

Learning Ext JS 4 by Armando Gonzalez, Crysfel Villa

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Manipulation – How to change it?

We can create and remove nodes from the DOM very easily. The Ext contains a DomHelper object, which provides an abstraction layer and give us an API to create DOM nodes or HTML fragments.

Let's create an HTML file, import the Ext library, and then use the DomHelper object to append a div element to the document's body.

Ext.onReady(function(){

  Ext.DomHelper.append(Ext.getBody(),{
    tag    : "div",
    style  : {
      width  : "100px",
      height  : "100px",
      border  : "2px solid #333",
      margin	: "20px auto"
    }
  });

});

We used the append method; the first parameter is where we want to append the new element. In this case we're going to append it to the document's body.

The second parameter is the element that we want to append; the tag property ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required