Manejo de eventos sobre Elementos Más videos
Comentarios: 10
Likes: 1 Persona
Duración: 0.0 minutos
Dificultad: Intermedio
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.
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.
10Comentarios
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?
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
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
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.
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
saludos, quiciera saber como hacer para disparar eventos, asi cmo en jquery: ejemplo: $("#button_validad").trigger("click"); gracias
Como se puede saber que boton del mouse se ha presionado?
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
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!
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???