Blog

Esperar cuando el DOM esté listo para usarse

Hemos visto en los primeros temas de este curso como lograr esto, en esta ocasión utilizaré un objeto debidamente empaquetado para explicar el funcionamiento del objecto “Element”, de esta manera evitamos conflictos con cualquier otro código de terceros.

//se crea el “paquete”
Ext.namespace('com.quizzpot.tutorial');

com.quizzpot.tutorial.Element = {
	init: function(){
		//el código del tutorial irá aquí
	}
}
//Cuando el DOM esté listo se invoca la función “init”
Ext.onReady(com.quizzpot.tutorial.Element.init,com.quizzpot.tutorial.Element);

Es importante mencionar que el segundo parámetro que se le pasa al evento “onReady” es el contexto donde se ejecutará.

Obtener un elemento

Normalmente utilizamos el método “document.getElementById” para tomar elementos del documento mediante su identificador, con Ext JS podemos obtener los elementos de la siguiente manera:

var el = Ext.Element.get('my_id');
// o simplemente el atajo
var el = Ext.get('my_id');

Existen numerosas ventajas al utilizar este método ya que no solamente regresa el elemento del DOM sino que retorna un objeto con métodos y propiedades que podemos utilizar para manipularlo, por ejemplo para agregar o quitar clases CSS lo hacemos de la siguiente manera:

//tomamos el elemento “panel”
var el = Ext.get('panel');
//se le agrega la clase “element”
el.addClass('element');
//le quitamos la clase “anotherClass” al elemento
el.removeClass('anotherClass');

También podemos agregarle estilos al elemento de una manera muy sencilla utilizando el método “setStyle” de la siguiente manera:

//un estilo a la vez
el.setStyle('background-color','#CFE5FA');
el.setStyle('border','1px solid #99BBE8');
// o varios al mismo tiempo
el.setStyle({
	'background-color','#CFE5FA',
'border','1px solid #99BBE8'
});

Existen muchos métodos más que están disponibles y que nos pueden ayudar para trabajar eficientemente. En el siguiente ejemplo se muestran varios de ellos:

//Centrar el elemento en la pantalla
el.center();
//cambiar la opacidad del elemento a 85%
el.setOpacity(.85);

//obteniendo el padre del elemento
var parent = el.parent();
//agregando algunos estilos al padre
parent.setStyle({
	'background-color':'#ccc',
	'font-family':'"Trebuchet MS",Arial,sans-serif',
	'font-size':'.9em'
});

//el contenido se hace no seleccionable
el.unselectable();

//elimina el elemento del DOM
el.remove();

Mejorado el rendimiento

Si solamente necesitamos modificar alguna propiedad de un elemento en una sola línea de código y no necesitamos tener una referencia a ese objeto es conveniente utilizar el método “fly” de la clase “Element”, pues nos permite ahorrar memoria del explorador ya que no crea una instancia de la clase Element para que el objeto sea manipulado sino que utiliza la misma memoria una y otra vez, por ejemplo para cambiar un estilo sería de la siguiente manera:

Ext.Element.fly('footer').setStyle('border','1px solid #aaa');
// o el atajo
Ext.fly('footer').setStyle('border','1px solid #aaa');

Conclusiones

La clase “Ext.Element” puede ser utilizada con frecuencia en nuestros proyectos para manipular el DOM, por eso es importante conocer los métodos que contiene para utilizarlos cuando sea conveniente. Te recomiendo ver el API de esta clase para conocerla mejor.