Buscar elementos del DOM con Ext JS Más videos
Comentarios: 18
Likes: 0 Persona
Duración: 0.0 minutos
Dificultad: Intermedio
Descripción del tema
En este tema vamos a construir unos “tabs”, para hacer esto es necesario buscar los elementos en el DOM para aplicarle la funcionalidad y estilos requeridos.
Material de apoyo
El material de apoyo para este tema cuenta con un documento HTML, el JavaScript y una hoja de estilos para maquetar el contenido del HTML, lo que vamos a hacer es buscar elementos para aplicarles estilos, algunos eventos y como resultado construiremos unos tabs.Ext.DomQuery
Ext JS cuenta con el objeto DomQuery para buscar elementos en el DOM de una manera muy sencilla y rápida, además de que provee varios métodos que regresan una colección de nodos que satisfacen algún criterio de búsqueda o solamente el elemento que necesitamos que sea seleccionado por su identificador, además podemos asignarle el nodo sobre el cual debe realizarse la búsqueda.Paso 1: Empaquetando el componente
Lo primero que haremos es crear el objeto “Tabs” con su respectivo “paquete” para evitar sobrescribir algún otro componente.Ext.namespace('com.quizzpot.tutorial');
com.quizzpot.tutorial.Tabs = {
init: function(){
//Aquí irá el código del tutorial
}
}
Ext.onReady(com.quizzpot.tutorial.Tabs.init,com.quizzpot.tutorial.Tabs);
El componente anterior tiene una función “init” la cual se invoca tan pronto como el DOM esté listo para ser utilizado.
Paso 2: Dando estilo a los tabs
Actualmente los tabs no tienen ningún estilo, son simples links a los cuales tenemos que agregarles una clase de CSS que definimos previamente en la hoja de estilos “domquery.css”. Necesitamos buscar todos los links que estén dentro de una lista y pertenezcan al menú, así que utilizamos el método “select” del objeto DomQuery, el cual regresa un arreglo con los elementos encontrados.var items = Ext.DomQuery.select('div[id=menu] > ul li a');
Con la sentencia anterior lo que hicimos fue buscar los links “a” que estén dentro de un “div” cuyo “id” sea igual a “menu” y contenga inmediatamente una lista de tipo “ul” con un “li”. Ahora vamos a iterar el arreglo haciendo algunas modificaciones:
Ext.each(items,function(item,i){
item.id = item.innerHTML;
Ext.fly(item).addClass('menu-item');
Ext.fly('content'+item.id).setStyle('display','none');
});
Lo primero que se hace es utilizar la función “Ext.each” que recibe como primer parámetro el arreglo que se va a iterar y como segundo parámetro la función que se ejecutará por cada elemento en el arreglo, dentro de la función se le asigna un “id” al menú para que más adelante podamos distinguir los tabs, inmediatamente después se le agrega una clase “css” al elemento en cuestión (si no sabes que hace “Ext.fly” te recomiendo leer el tema anterior), por último se oculta el contenido que desplegará ese tab.
Paso 3: Desplegando el tab inicial
Para desplegar el tab inicial debemos mostrar el contenido y seleccionar el tab correspondiente.Ext.fly('contentHome').setStyle('display','block');
var first = Ext.DomQuery.selectNode('#menu ul li a:last');
Ext.fly(first).addClass('item-selected');
Lo único interesante de esta porción de código es la parte donde buscamos el tab que seleccionaremos en este caso utilizamos la función “selectNode” del objeto DomQuery para buscar el último elemento de la lista “ul” contenidos en el div con id “menu” (observa que he utilizado “#menu” en lugar de “div[id=menu]”).
Paso 4: Asignar estilos al div contenedor
Utilizando la función “Element.setStyle” vamos a asignarle la altura al div contenedor y aplicar un borde.Ext.fly('content').setStyle({
'height':'300px',
'border':'5px solid #000',
'border-top':'none'
});
Ya hemos hablado sobre el objeto Element en este curso, si tienes dudas sobre el código anterior te recomiendo leer el tema correspondiente.
Paso 5: Crear el evento onClick
Vamos a iterar el arreglo “items” que creamos anteriormente para asignarle el evento clic a cada tab.Ext.each(items,function(item){
this.onClick(item);
},this);
Lo más interesante de esta parte es el tercer argumento que recibe la función “Ext.each”, el cual es el contexto donde se ejecutará la función dada en el segundo parámetro, es muy importante asignar el contexto adecuado para poder invocar el método “this.onClick” que definiremos a continuación.
Paso 6: Definiendo el Clic
Es necesario crear el método “onClick” dentro del objeto “Tabs”, el cual mostrará el contenido correcto cuando sea seleccionado un tab.Ext.namespace('com.quizzpot.tutorial');
com.quizzpot.tutorial.Tabs = {
init: function(){
var items = Ext.DomQuery.select('div[id=menu] > ul li a');
// … código removido para mejor compresión
Ext.each(items,function(item){
this.onClick(item); //invocando el método onClick
},this); //Se asigna el contexto adecuado
},
onClick: function(el){
// aquí ira el código para mostrar tabs
}
}
El código anterior muestra el lugar donde se define el método clic, el cual recibe un elemento del DOM.
Lo primero que necesitamos hacer es crear el evento de la siguiente manera.
el.onclick = function(){
return false;
}
Con esta instrucción cada vez que se le dé clic a un tab esa función se ejecutará, ahí es donde pondremos las acciones que necesitemos realizar; la función regresa “false” para que no siga con el “href” del link.
Paso 7: Seleccionando el tab correcto
Primero necesitamos remover la clase “item-selected” del tab que actualmente está seleccionado y asignarle esa misma clase al elemento al que le ha dado clic.var old = Ext.DomQuery.selectNode('#menu ul li a[class*=item-selected]');
Ext.fly(old).removeClass('item-selected');
Ext.fly(this).addClass('item-selected');
Paso 8: Mostrar el contenido seleccionado
Ahora que sabemos cual tab se le dio clic podemos mostrar el contenido correcto, pero antes debemos ocultar el contenido que actualmente se está mostrando.var content = Ext.DomQuery.selectNode('#content > div{display=block}');
Ext.fly(content).setStyle('display','none');
Ext.fly('content'+this.id).setStyle('display','block');
La parte más importante está en la primera línea donde hacemos una búsqueda dentro del “div” que tiene por identificador “content”, el contenido que tenga el estilo “display=block”, es decir el contenido que se está visualizando actualmente, una vez encontrado se oculta y se muestra el nuevo contenido.
Conclusiones
En este tema vimos como se puede utilizar la clase DomQuery para buscar elementos dentro del DOM, usando propiedades de CSS, clases de CSS, etiquetas de los elementos y atributos de algún elemento. Hemos creado además unos tabs sencillos pero funcionales, te recomiendo hacer experimentos con esta clase que es muy útil para cuando estemos desarrollando nuestras aplicaciones. Es importante mencionar que todo el ejercicio mostrado lo pudimos haber hecho con jQuery si lo utilizáramos como adapter del framework, queda a nuestra conveniencia utilizar lo que mas nos guste o conozcamos.Te gustaría recibir más tutoriales como este en tu correo?
Este tutorial pertenece al curso Aprendiendo Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.
Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!
Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.
Instructor del curso
Regístrate a este curso
Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.
Tendrás acceso a descargar los videos, códigos y material adicional.
Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.
Llevarás un registro de tu avance.
18Comentarios
tengo dos inquietudes una que quiere decir los corchetes en esta linea? var old = Ext.DomQuery.selectNode('#menu ul li a[class*=item-selected]'); Y segunda pregunta que significa el >() en esta linea? # var content = Ext.DomQuery.selectNode('#content > div{display=block}');
Los corchetes significa que estas indicando un atributo, en este caso el atributo "class", si te das cuenta tamibén hemos utilizado el atributo "id". El signo ">" significa que estas referenciando a los hijos directos, osea aquellos nodos que su padre es el nodo "#content" para este caso, los nietos y demas desendientes quedan descartados. saludos
Muy bueno el tutorial, entendi los pasos 7 y 8 despues de mirar el codigo fuente completo, es decir, no se que tan atrevido sea mi comentario, pero es confuso en la explicacion llegar a meter estos bloques de codigo en la funcion onclick, es de suponer esta inclusion para personas experimentandas y mas por el tema del operador this y su ambito. Pero en resumen, es el mejor tutorial de esta libreria que he encontrado, gracias.
Hice este cambio en la parte 02 del tema: Ext.each(items,function(item,i){ item.id = item.innerHTML; console.debug("'content'+item.id : "+ 'content'+item.id); Ext.fly(item).addClass('menu-item'); Ext.fly(item.id).setStyle('display','none'); //Ext.fly('content'+item.id).setStyle('display','none'); }); y parece funcionar bien puesto que los items del menu pueden verse en la consola y se ocultan... pero siguiendo todo el resto del tema.. todo parece funcionar bien pero no se visualizan los items del menu.. y por supuesto no puedo seleccionarlos como aparece en la Prueba de la demostracion... Hay algun error ?? Ignoro de donde aparecen las clases 'menu-item', y luego 'item-selected' que no aparecen en la documentacion API de ExtJS... @Mlaynes
Ok.. deshabilite el ocultamiento de los items y funciona el ejemplo... pero mantengo mi duda respecto a de donde provienen las clases 'menu-item' e 'item-selected' que no ubico en ExtJS.. y no parecen ser de JScript... Lo digo xque funcionan igual: Ext.fly(item).addClass('menu-item'); ....y Ext.fly(item.id).addClass('menu-item'); y quise revisar la documentacion al respecto...
Hola te comento que esta super bueno e interesante el tutorial, el problema es que como recien lo encontre en el internet no avance a revisar todos los capitulos y ya no cuento con el material de apoyo, talvez habra la posibilidad de poderlo descargar de algun otro lugar o me lo puedes facilitar al correo por favor. Te estare infinitamente agradecida...
Miguel Laynes ‘menu-item’ e ‘item-selected’ son clases definidas en el css que vienen con el material
Muy bueno
Saludos, mi pregunta es como podría hacer algo como: Ext.onReady(com.quizzpot.tutorial.Tabs.init,com.quizzpot.tutorial.Tabs); con el adapter de jquery?? dentro del jQuery().ready(function (){ ??? }); Gracias de antemano
Puedes hacerlo de la siguiente manera: jQuery().ready(function (){ com.quizzpot.tutorial.Tabs.init(); }); Saludos
lo solucioné así: jQuery(document).ready(namespace.app.init, namespace.app); Gracias
Que bien, la verdad no sabía que el método "ready" aceptaba un segundo parámetro. :o
Hola solo queria explicitamente dejar mi agradecimiento personal a quizzpot y todos lo que tienen que ver con el mismo. Sus tutoriales y cursos me han sacado de apuros en mas de una ocasion. Yo soy cubano y esa condicion dificulta cualquier tipo de gestion para la comunicacion, me refiero a contratar cursos o hacer donaciones, si pudiera con gusto daria mi modesto aporte. Otra vez gracias.
Oye como puedo poner una celda cualquiera de datos en extjs pero marcarle el recuadro (borde) como si fuera un titulo, vaya asi como si cambiara el color de fondo con addClass pero lo que quiero es marcar el contorno de la celda como si fuera titulo
Hola Crysfel, me he percatado que varios de los "DEMOS" no están y de verdad que son muy útiles. uso mucho tu sitio como ayuda memoria y para aprender. Gracias.
busca en el css
oki.. thanks..
Como puedo obtener los elementos hijos de un elemento, o solamente el primer hijo sin importar de que tipo sea. saludos