<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Desarrollosweb.net &#187; Ext.select</title>
	<atom:link href="http://www.desarrollosweb.net/tag/extselect/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.desarrollosweb.net</link>
	<description>Desarrollo de webs y aplicaciones</description>
	<lastBuildDate>Fri, 29 Jul 2011 15:42:38 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Introduciendo ExtJS(III): El método Ext.select</title>
		<link>http://www.desarrollosweb.net/2008/11/12/introduciendo-extjs-el-metodo-ext-select/</link>
		<comments>http://www.desarrollosweb.net/2008/11/12/introduciendo-extjs-el-metodo-ext-select/#comments</comments>
		<pubDate>Wed, 12 Nov 2008 13:10:47 +0000</pubDate>
		<dc:creator>Javier Caride</dc:creator>
				<category><![CDATA[ExtJS]]></category>
		<category><![CDATA[desarrollo web]]></category>
		<category><![CDATA[Ext.select]]></category>
		<category><![CDATA[extjs]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.desarrollosweb.net/?p=24</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>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.</p>
<pre name="code" class="javascript">
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);
    });
});
</pre>
<p>Debido a que la lista de selectores es bastante extensa, os recomiendo que consultéis el <a href="http://www.extjs.com/deploy/dev/docs/" target="_blank">API de ExtJS</a>, concretamente la sección dedicada a Ext.DomQuery</p>
<p>Para comprender mejor el código, <a href="http://appsrv01.desarrollosweb.net/blog/extjs/ext_select.html" target="_blank">podéis ver el ejemplo</p>
]]></content:encoded>
			<wfw:commentRss>http://www.desarrollosweb.net/2008/11/12/introduciendo-extjs-el-metodo-ext-select/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

