Desarrollosweb.net

Ext.Element, es quizás el objeto más importante en ExtJS. Normalmente si queremos referenciar en nuestro código Javascript cualquier objeto del DOM, normalmente utilizaremos la instrucción:

var divObj = document.getElementById('divEjemplo');

Este método sólo nos devuelve el objeto javascript “tal cual” sin ninguna función a mayores para manejarlo.

ExtJS nos facilita el objeto Ext.Element, para ampliar las funcionalidades de cualquier objeto del DOM mediante una capa de funciones y métodos comunes que lo “envuelve”. Para “envolver” cualquier objeto del DOM mediante esta capa, sólo tenemos que hacer uso de la función Ext.get() para solicitarle al DOM el objeto, en vez de la clásica llamada Javascript:

Sobre los objetos del DOM obtenidos a través de esta función, se pueden realizar múltiples operaciones que nos facilitan operaciones como redimensionar objetos, cambiar opacidad, etc. Para un listado completo de ellas se recomienda consultar el API de ExtJS.

Un ejemplo del uso de este método de la librería ExtJS es el siguiente

Ext.onReady(function() {
	// Capturamos el objeto del DOM
    var divObj = Ext.get('divEjemplo');

    // Fijamos las opciones para la duración de las animaciones
    var animOpt = {
        duration: 10
    };

    // Remarcamos el objeto
    divObj.highlight();
    // Cambiamos la opacidad
    divObj.setOpacity(.25,animOpt);
    // Cambiamos el ancho
    divObj.setWidth(100,animOpt);
    // Quitamos la clase CSS
    divObj.removeClass('backgroundRed');
    // Le ponemos otra
    divObj.addClass('backgroundGreen');
});

Para comprender mejor lo que hace, os recomiendo ver el ejemplo

Etiquetas: desarrollo web, ext.element, extjs, javascript