Blog

Material de apoyo

Es necesario descargar el material de apoyo para realizar este tutorial, el cual es un documento HTML que incluye a la librería de Ext JS, algunos estilos y un “div” en el “body” para realizar los ejemplos de este tema, el documento en JavaScript está vacío.

Definiendo el namespace del tutorial

Antes de comenzar a ver la clase DomHelper vamos a “empaquetar” el código que estamos por escribir para evitar problemas con otras librerías, esto lo hacemos de la siguiente manera:

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

com.quizzpot.tutorial.DomHelper = {
	init: function(){
		//El código del tutorial irá aquí
	}
}

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

Cuando el DOM esté listo para utilizarse se ejecuta la función “init”, por lo tanto vamos a escribir el código dentro de esta función para que sea ejecutado inmediatamente.

Crear elementos

Es muy fácil crear elementos con esta utilería, simplemente tenemos que saber donde queremos insertar el nuevo elemento y definir el contenido que necesitemos insertar.

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);

Mediante el método “append” insertamos un elemento al documento, el primer parámetro es el lugar donde se va a insertar, en este caso es el “ID” de un elemento (div) que está definido en el documento HTML pero puede ser un objeto de tipo “Ext.Element”; el segundo argumento es un objeto que va a ser insertado dentro del elemento asignado en el primer argumento, a este objeto se le ha definido un “id”, un “tag” y los “children”; la propiedad “id” actuará como el identificador del elemento, la propiedad “tag” se utiliza para definir el elemento a crear, en este caso una lista “ul” pero se puede definir cualquier elemento HTML que sea válido, opcionalmente se le pueden agregar hijos (children) mediante un arreglo de objetos.

Aplicar estilos

Mediante la clase DomHelper podemos modificar los estilos de un elemento de una forma muy sencilla.

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');

Únicamente es necesario especificar el elemento que deseamos modificar y como segundo parámetro definimos un objeto o un String con los estilos que necesitamos aplicarle al elemento.

Insertar elementos

La clase DomHelper cuenta con varios métodos para insertar elementos al DOM, podemos utilizar estos métodos para especificar el lugar exacto donde queremos hacerlo.

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.'});

Utilizando el método “insertBefore” podemos insertar el nuevo elemento antes del elemento que le especificamos, en este caso “my-list”, también se puede utilizar el método “insertAfter” para insertar el elemento después del elemento indicado.

Conclusiones

Manipular el DOM es esencial para cuando creamos interfaces personalizadas, es por esto que es importante comprender y conocer el uso de esta clase que nos facilitará muchas cosas.

Si todavía no te has inscrito al rss, te recomiendo lo hagas para recibir actualizaciones, y como siempre si tienes alguna duda o sugerencia puedes hacerla en los comentarios.