Ext JS has a very useful tool to manipulate the DOM in a very simple way, so in this chapter we will see how to create elements, apply styles and insert them in the DOM.

Resources

You will need to download the resources in order to do this tutorial, the resources for this tutorial has a HTML document that includes the Ext JS library, some styles and a "div" in the document's "body", the JavaScript file is empty.

Defining the namespace of the tutorial

Before we start learning about the class DomHelper let's "package" the code we are about to write in order to avoid future problems with other libraries.

Ext.namespace('com.quizzpot.tutorial');

com.quizzpot.tutorial.DomHelper = {
	init: function(){
		//The code of the tutorial goes here
	}
}

Ext.onReady(com.quizzpot.tutorial.DomHelper.init,com.quizzpot.tutorial.DomHelper);

When the DOM is ready to be used the function "init" is executed, therefore we will write the code inside of that function so it can be executed immediately.

Create elements

It's very easy to create elements with this tool, we only have to know where we want to insert the new element and define its content.

var list = Ext.DomHelper.append('content',{
	id: 'my-list', tag:'ul', children:[
		{tag:'li',children:[{tag:'a',href:'#',html:'Hello world!'}]},
		{tag:'li',html:'Item 2'},
		{tag:'li',html:'Item 3'},
		{tag:'li',html:'Item 4'}
	]
},true);

With the method "append" we insert an element to the document, the first parameter is the place where its going to be inserted, in this case is the "ID" of an element (div) that is defined in the HTML document but it can be an "Ext.Element" object; the second parameter is an object that is going to be inserted inside of the element passed in the first argument, we have defined an "id", a "tag" and "children" to this element; the property "id" will act as the identifier of the element, the property "tag" will be used to define the type of element to be created, in this case a list "ul" but we can define any other valid HTML element, optionally we can add children using an object array.

Applying styles

With the DomHelper class we can modify the styles of an element in a very simple way.

Ext.DomHelper.applyStyles('my-list',{
	'border':'5px solid #ddd',
	'padding':'5px',
	'background-color':'#f8f8f8'
});

Ext.DomHelper.applyStyles('my-list','border:5px solid #ddd;padding:5px;background-color:#f8f8f8');

What we need to do is specify in the first parameter the element that we want to modify and in the second parameter we define an object or a String with the styles we will need to apply to the element.

Inserting elements

The DomHelper class has different methods that insert elements to the DOM, we can use this methods to specify the exact place where we want to do it.

Ext.DomHelper.insertBefore('my-list',{tag:'p',html:'Hey esto es un parrafo.'});
Ext.DomHelper.insertAfter('my-list',{tag:'p',html:'Soy otro parrafo, insertado mediante javascript.'});

When we use the method "insertBefore" we can insert the new element before the specified element, in this case "my-list", also we can use the method "insertAfter" to insert the element after the specified element.

Conclusions

Manipulating the DOM is very important when we create customized interfaces, that's why we must understand this class because it will make our job easier. I you haven't susbcribe to our rss, I recommend you to do it in order to receive the latest updates and as always if you have any questions or suggestions don't forget to leave a comment.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Learning Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!