Desarrollosweb.net

Como otros frameworks Javascript (jQuery, prototype, etc.) ExtJS posee una colección de selectores para localizar cualquier elemento dentro del DOM. Aunque hay una clase singleton que nos facilita las herramientas necesarias para hacer esta selección (Ext.DomQuery), normalmente seleccionaremos un elemento del DOM mediante la función Ext.select(), como podemos ver a continuación.

Ext.onReady(function() {
	// Capturamos el objeto del DOM y le asignamos un manejador de evento directamente
    Ext.get('divPrimero').on('click',function() {
    	/* Una selección compleja:
    	 *
    	 * Nos quedamos con los elementos 'li' cuyo 'id' finalice con la cadena 'test1'
    	 * de todas las listas del 'div' que está decorado con la clase CSS
    	 * 'backgroundGreen'
    	 */
        Ext.select('div[class=backgroundGreen] > ul > li[id$=test1]').highlight();
    });

    Ext.get('divSegundo').on('click',function() {
    	/*
    	 * Una selección sencilla, nos quedamos con los div que tengan clase
    	 * backgroundGreen y los remarcamos
    	 */
        Ext.select('div[class=backgroundGreen]').highlight();
    });

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

    // Selector global para todos los divs cuya clase CSS comience por la cadena 'background'
    Ext.select('div[class^=background]').setHeight(120,animOpt);
    Ext.select('div[class^=background]').setWidth(400,animOpt);

    // Otra forma de asignar un evento
    div_3 = Ext.get('divTercero');
    div_3.on('click',function() {
        Ext.select('div[class^=background]').setWidth(900,animOpt);
    });
});

Debido a que la lista de selectores es bastante extensa, os recomiendo que consultéis el API de ExtJS, concretamente la sección dedicada a Ext.DomQuery

Para comprender mejor el código, podéis ver el ejemplo

Etiquetas: desarrollo web, Ext.select, extjs, javascript