Ext-JS définit un ensemble de classes et d'objets servant à gérer
les événements.
L'ensemble se base sur le Design Pattern Observable.
L'objet Ext.EventManager est le gestionnaire d'événements de
votre application. C'est un singleton qui est défini par le framework.
Tous les événements sont encapsulés dans un objet Ext.EventObject,
que ce soit des événements du système, du DOM, du framework ou de votre application.
Les objets capables d'émettre des événements dérivent (implémentent) Ext.Observable.
Lors de l'instanciation de tels objets, l'attribut listener liste
les handlers que vous voulez attacher aux événements de votre objet.
Sélectionnez
var newEmployee =newEmployee({name: employeeName,listeners:{quit:function() {// By default, "this" will be the object that fired the eventalert(this.name+" has quit!");}}});
Mais il est aussi possible d'attacher dynamiquement un handler.
Sélectionnez
newEmployee.on('quit',function() {alert(this.name+" has quit!");}
);
Ext-JS attache son propre gestionnaire d'événements à chaque objet
le nécessitant. Il distribue ensuite l'événement à tous les handlers
qui sont attachés à l'événement. Lorsqu'on veut être certain de faire un traitement
sur un événement avant que tous les traitements des handlers soient
déclenchés, il suffit de définir un intercepteur avec la méthode capture.
Lorsqu'on définit un handler, la fonction fournie s'exécute dans
le contexte de l'objet ayant généré l'événement. Si on passe en paramètre une
méthode d'un autre objet à la méthode, lors de l'exécution, this
représentera l'objet ayant émis l'événement et non celui à l'origine de la méthode
(ceci est le fonctionnement de JavaScript).
Pour pallier cette difficulté, Ext-JS permet de définir un attribut
scope qui sera l'objet sur lequel sera appelée la méthode :