Solución:
Comencemos describiendo el manejo de eventos de los elementos DOM.
Manejo de eventos del nodo DOM
En primer lugar, no querría trabajar con el nodo DOM directamente. En su lugar, probablemente desee utilizar Ext.Element interfaz. Con el fin de asignar controladores de eventos, Element.addListener y Element.on (estos son equivalentes) fueron creados. Entonces, por ejemplo, si tenemos html:
<div id="test_node"></div>
y queremos agregar click controlador de eventos.
Vamos a recuperar Element:
var el = Ext.get('test_node');
Ahora revisemos los documentos para click evento. Su controlador puede tener tres parámetros:
haga clic en (Ext.EventObject e, HTMLElement t, Object eOpts)
Sabiendo todo esto, podemos asignar un controlador:
// event name event handler
el.on( 'click' , function(e, t, eOpts){
// handling event here
});
Manejo de eventos de widgets
El manejo de eventos de los widgets es bastante similar al manejo de eventos de los nodos DOM.
En primer lugar, el manejo de eventos de widgets se realiza utilizando Ext.util.Observable mixin. Para manejar los eventos correctamente, su widget debe contener Ext.util.Observable como mixin. Todos los widgets integrados (como Panel, Formulario, Árbol, Cuadrícula, …) tienen Ext.util.Observable como mixin por defecto.
Para los widgets, hay dos formas de asignar controladores. El primero – es usar un método (o addListener). Por ejemplo, creemos Button widget y asignar click evento a ella. En primer lugar, debe verificar los documentos del evento para los argumentos del controlador:
haga clic en (botón Ext., botón this, Event e, Object eOpts)
Ahora usemos on:
var myButton = Ext.create('Ext.button.Button', {
text: 'Test button'
});
myButton.on('click', function(btn, e, eOpts) {
// event handling here
console.log(btn, e, eOpts);
});
La segunda forma es usar la configuración de los escuchas del widget:
var myButton = Ext.create('Ext.button.Button', {
text: 'Test button',
listeners : {
click: function(btn, e, eOpts) {
// event handling here
console.log(btn, e, eOpts);
}
}
});
Darse cuenta de Button widget es un tipo especial de widgets. El evento de clic se puede asignar a este widget usando handler config:
var myButton = Ext.create('Ext.button.Button', {
text: 'Test button',
handler : function(btn, e, eOpts) {
// event handling here
console.log(btn, e, eOpts);
}
});
Activación de eventos personalizados
En primer lugar, debe registrar un evento utilizando el método addEvents:
myButton.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', /* ... */);
Utilizando el addEvents el método es opcional. Como dicen los comentarios sobre este método, no es necesario utilizar este método, pero proporciona un lugar para la documentación de eventos.
Para disparar su evento, use el método fireEvent:
myButton.fireEvent('myspecialevent1', arg1, arg2, arg3, /* ... */);
arg1, arg2, arg3, /* ... */ se pasará al controlador. Ahora podemos manejar su evento:
myButton.on('myspecialevent1', function(arg1, arg2, arg3, /* ... */) {
// event handling here
console.log(arg1, arg2, arg3, /* ... */);
});
Vale la pena mencionar que el mejor lugar para insertar la llamada al método addEvents es el widget initComponent método cuando está definiendo un nuevo widget:
Ext.define('MyCustomButton', {
extend: 'Ext.button.Button',
// ... other configs,
initComponent: function(){
this.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', /* ... */);
// ...
this.callParent(arguments);
}
});
var myButton = Ext.create('MyCustomButton', { /* configs */ });
Evitar la propagación de eventos
Para evitar el burbujeo, puede return false o usar Ext.EventObject.preventDefault(). Para evitar el uso de acciones predeterminadas del navegador Ext.EventObject.stopPropagation().
Por ejemplo, asignemos un controlador de eventos de clic a nuestro botón. Y si no se hizo clic en el botón izquierdo, evitar la acción predeterminada del navegador:
myButton.on('click', function(btn, e){
if (e.button !== 0)
e.preventDefault();
});
Activación de eventos de toda la aplicación
Cómo hacer que los controladores hablen entre sí …
Además de la excelente respuesta anterior, quiero mencionar los eventos de toda la aplicación que pueden ser muy útiles en una configuración MVC para permitir la comunicación entre controladores. (extjs4.1)
Digamos que tenemos una estación controladora (ejemplos de Sencha MVC) con un cuadro de selección:
Ext.define('Pandora.controller.Station', {
extend: 'Ext.app.Controller',
...
init: function() {
this.control({
'stationslist': {
selectionchange: this.onStationSelect
},
...
});
},
...
onStationSelect: function(selModel, selection) {
this.application.fireEvent('stationstart', selection[0]);
},
...
});
Cuando el cuadro de selección activa un evento de cambio, la función onStationSelect Está despedido.
Dentro de esa función vemos:
this.application.fireEvent('stationstart', selection[0]);
Esto crea y dispara un evento en toda la aplicación que podemos escuchar desde cualquier otro controlador.
Por lo tanto, en otro controlador ahora podemos saber cuándo se ha cambiado el cuadro de selección de estación. Esto se hace escuchando this.application.on como sigue:
Ext.define('Pandora.controller.Song', {
extend: 'Ext.app.Controller',
...
init: function() {
this.control({
'recentlyplayedscroller': {
selectionchange: this.onSongSelect
}
});
// Listen for an application wide event
this.application.on({
stationstart: this.onStationStart,
scope: this
});
},
....
onStationStart: function(station) {
console.info('I called to inform you that the Station controller select box just has been changed');
console.info('Now what do you want to do next?');
},
}
Si se ha cambiado el cuadro de selección, ahora disparamos la función onStationStart en el controlador Song además …
De los documentos de Sencha:
Los eventos de aplicación son extremadamente útiles para eventos que tienen muchos controladores. En lugar de escuchar el mismo evento de vista en cada uno de estos controladores, solo un controlador escucha el evento de vista y dispara un evento en toda la aplicación que los demás pueden escuchar. Esto también permite que los controladores se comuniquen entre sí sin saber ni depender de la existencia de los demás.
En mi caso: hacer clic en un nodo de árbol para actualizar los datos en un panel de cuadrícula.
Actualización 2016 gracias a @ gm2008 de los comentarios a continuación:
En términos de activar eventos personalizados en toda la aplicación, hay un nuevo método ahora después de ExtJS V5.1 se publica, que utiliza Ext.GlobalEvents.
Cuando dispara eventos, puede llamar a: Ext.GlobalEvents.fireEvent('custom_event');
Cuando registra un manejador del evento, llama a: Ext.GlobalEvents.on('custom_event', function(arguments){/* handler codes*/}, scope);
Este método no se limita a los controladores. Cualquier componente puede manejar un evento personalizado poniendo el objeto del componente como el alcance del parámetro de entrada.
Encontrado en Sencha Docs: MVC Part 2
Un truco más para los oyentes de eventos del controlador.
Puede utilizar comodines para buscar un evento desde cualquier componente:
this.control({
'*':{
myCustomEvent: this.doSomething
}
});