Aprendiendo Ext JS 3

Manejo de eventos sobre Elementos Más videos

Descripción del tema

Los eventos son muy importantes en nuestras aplicaciones, de esta manera podemos monitorear el comportamiento del usuario y el sistema reaccionará dependiendo de lo que esté sucediendo.

El problema

El tema de los eventos se complica cuando necesitamos que nuestras aplicaciones funcionen correctamente en diferentes exploradores ya que existen diferencias en algunos exploradores en cuando al manejo de eventos.

La solución

Mediante Ext JS podemos evitarnos el trabajo de detectar el explorador y manejar los eventos de una u otra manera, simplemente es necesario agregar un “listener” en algún elemento o componente y Ext JS se encargará del resto.
//aquí le mostraremos al usuario un mensaje
var msg = Ext.get('msg');
//tomamos el elemento “frame”
var el = Ext.get('frame');
		
//Agregamos el evento necesario 
el.addListener('mouseover',function(event,element,options){
	//ejecutamos todo lo que necesitemos cuando se dispare el evento 
	msg.dom.innerHTML = options.param1+'over!'; 
},this,{param1:'the mouse is '});
En el código anterior primero se obtiene el elemento “frame”, el cual es un div que se encuentra en el documento HTML, luego se le agrega un evento utilizando la función “addListener” la cual recibe como primer parámetro el evento que necesitamos monitorear (click, mouseover, mouseout, mousedown, etc...) y como segundo parámetro recibe una función, la cual es disparada cuando ocurra el evento especificado; opcionalmente podemos definir en el tercer parámetro el contexto donde se ejecutará la función del segundo parámetro, también podemos pasarle un objeto con las propiedades que necesitemos en el cuarto argumento. Existe un atajo para la función “addListener”, podemos utilizar la función “on” ya que su funcionamiento es el mismo y de esta manera escribiremos menos.
//tomamos el elemento “frame”
var el = Ext.get('frame');
		
//Agregamos el evento necesario 
el.on('mouseover',function(event,element,options){
	//ejecutamos todo lo que necesitemos cuando se dispare el evento 
	msg.dom.innerHTML = options.param1+'over!'; 
},this,{param1:'the mouse is '});
El código anterior hace exactamente lo mismo que el primer ejemplo, solo que en lugar de utilizar la función “addListener” se ha utilizado la función “on”. A continuación voy a agregarle algunos eventos más al elemento para ver claramente el funcionamiento:
//cuando el mouse sale del elemento
el.on('mouseout',function(){
	msg.dom.innerHTML = 'out!';
});
		
//se dispara cuando se da click sobre el elemento
el.on('click',function(){
	msg.dom.innerHTML = 'click!';
});
		
//Si el botón del mouse es presionado sobre el 
//elemento, éste dispara la función definida
el.on('mousedown',function(){
	msg.dom.innerHTML = 'mouse down!';
});

//Si se ha soltado el botón del mouse dentro del elemento
//se dispara esta función	
el.on('mouseup',function(){
	msg.dom.innerHTML = 'mouse up!';
});

Componentes

Estas mismas funciones pueden ser utilizadas para monitorear eventos sobre los componentes (ventanas, grillas, árboles, menús, etc...) y su implementación es exactamente igual, simplemente hay que saber el evento que necesitamos monitorear (por ejemplo resize, load, collapse, etc.) dependiendo del componente. A continuación muestro un ejemplo de cómo monitorear cuando una ventana es minimizada:
//suponemos que se ha creado una instancia
//del componente Ext.Window anteriormente
//y en este punto le asignamos un “listener”
//para cuando sea minimizada
win.on('minimize',function(win){
	//aquí se realiza lo que se necesite
	//cuando la ventana ha sido minimizada
});

Conclusiones

Ext JS cuenta con una manera normalizada para poder ejecutar funciones cuando sucede determinado evento asegurándonos que funcionará sobre los diferentes exploradores. Como siempre si existe alguna duda o sugerencia la puedes hacer en los comentarios, además te recomiendo que te suscribas a las feeds o nos sigas en Twitter para estar al tanto de lo que estamos haciendo.

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.

¿Olvidaste tu contraseña?

10Comentarios

  • Avatar-10 luisorellana 06/10/2009

    hola a todos.. ¿alguien sabe si hay alguna forma de poder hacer un evento sobre un elemento que se encuentre dentro del codigo javascript y no dentro del documento HTML?

    • Avatar-3 Crysfel 06/10/2009

      Hola Luis. Te invito a inscribirte en el foro (http://foro.quizzpot.com) para que nos expliques mejor lo que quieres hacer, la verdad es que no entendí muy bien tu pregunta. saludos

      • Avatar-6 Miguel 29/10/2009

        Hola que tal, Estoy haciendo una pagina web con frames...¿Alguien sabe como detectar el movimiento del mouse en la pagina principal( de los frames), para invocar una pagina en determinado frame? porfavor ayudenme

        • Avatar-12 Santiago 19/04/2010

          Los frames no son una buena opción, además en el estandar HTML5 los han borrado, con lo cual tu página sería incompatible con HTML5.

          • Avatar-4 Crysfel 19/04/2010

            Si ves el código del tutorial detenidamente te darás cuenta que cuando digo "frame" me refiero al identificador que le asigné a un div ;) Saludos

            • Avatar-5 LUIS VIERA 28/05/2010

              saludos, quiciera saber como hacer para disparar eventos, asi cmo en jquery: ejemplo: $("#button_validad").trigger("click"); gracias

              • Avatar-3 Alei 22/08/2010

                Como se puede saber que boton del mouse se ha presionado?

                • Avatar-11 Luis 24/02/2011

                  Hola amigo, Llevo poco tiempo trabajando con Ext js y me he encontrado con un problema. Tengo un treepanel que funciona como menu y al precionar sobre cualquier item se carga un grid diferente por cada item en un tabpanel. El problema es que necesito que cuando se haga click sobre una celda del grid que este en el tab activo se ejecute un evento para poder mostrar un formulario. La verdad no entiendo bien la diferencia entre un handler y un addlistener y en que momento lo deberia añadir ya que estoy trabajando con clases para separar el codigo de cada grid en diferentes archivos. Yo creo la instancia del grid en el momento que lo voy a añadir al tab, lo que no se es si debo crear el evento antes o despues de crear la instancia del grid. Espero me puedas dar una idea de como solucionar esto. Gracias

                  • Avatar-11 JaiGod 21/09/2011

                    Estoy haciendo un formulario. Me gusto mucho este sobre el que estoy escribiendo ahora... supuse que estabas usando EXT pero veo que no. No me recomiendas usar EXT para un formulario con diseño libre? es mejor usarlo cuando se unas sus componentes propios? Saludos!

                    • Avatar-7 Gustavo 24/06/2016

                      Holas a todos quera saber como puedo pasar de una ventana a otra es decir pasar de una vista a otra a la hora de accionar un botón o algo parecido???

                      Instructor del curso

                      Crysfel3

                      Autor: Crysfel Villa

                      Es ingeniero de software con más de 7 años de experiencia en desarrollo web.

                      Descarga Código Fuente Ver Demostración

                      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.