Commençons par décrire la gestion des événements des éléments DOM.
Gestion des événements du nœud DOM
Tout d'abord, vous ne voudriez pas travailler directement avec le nœud DOM. Au lieu de cela, vous voudrez probablement utiliser l' Ext.Element
interface. Dans le but d'affecter des gestionnaires d'événements, Element.addListener
et Element.on
(ceux-ci sont équivalents) ont été créés. Donc, par exemple, si nous avons html:
<div id="test_node"></div>
et nous voulons ajouter click
un gestionnaire d'événements.
Récupérons Element
:
var el = Ext.get('test_node');
Maintenant, vérifions les documents pour l' click
événement. Son gestionnaire peut avoir trois paramètres:
cliquez sur (Ext.EventObject e, HTMLElement t, Object eOpts)
Connaissant tout cela, nous pouvons attribuer un gestionnaire:
// event name event handler
el.on( 'click' , function(e, t, eOpts){
// handling event here
});
Gestion des événements des widgets
La gestion des événements des widgets est assez similaire à la gestion des événements des nœuds DOM.
Tout d'abord, la gestion des événements des widgets est réalisée en utilisant Ext.util.Observable
mixin. Afin de gérer correctement les événements, votre widget doit contenir Ext.util.Observable
un mixin. Tous les widgets intégrés (comme Panel, Form, Tree, Grid, ...) ont Ext.util.Observable
comme mixin par défaut.
Pour les widgets, il existe deux manières d'attribuer des gestionnaires. Le premier - est à utiliser sur la méthode (ou addListener
). Créons par exemple un Button
widget et attribuons-lui un click
événement. Tout d'abord, vous devez vérifier les documents de l'événement pour les arguments du gestionnaire:
cliquez sur (bouton ext.Bouton this, Event e, Object eOpts)
Utilisons maintenant 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 deuxième façon est d'utiliser la configuration des écouteurs du 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);
}
}
});
Notez que le Button
widget est un type spécial de widgets. L'événement Click peut être attribué à ce widget en utilisant 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);
}
});
Tir d'événements personnalisés
Tout d'abord, vous devez enregistrer un événement à l'aide de la méthode addEvents :
myButton.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', /* ... */);
L'utilisation de la addEvents
méthode est facultative. Comme le disent les commentaires sur cette méthode, il n'est pas nécessaire d'utiliser cette méthode, mais elle fournit de la place pour la documentation des événements.
Pour déclencher votre événement, utilisez la méthode fireEvent :
myButton.fireEvent('myspecialevent1', arg1, arg2, arg3, /* ... */);
arg1, arg2, arg3, /* ... */
sera passé au gestionnaire. Maintenant, nous pouvons gérer votre événement:
myButton.on('myspecialevent1', function(arg1, arg2, arg3, /* ... */) {
// event handling here
console.log(arg1, arg2, arg3, /* ... */);
});
Il convient de mentionner que le meilleur endroit pour insérer un appel de méthode addEvents est la initComponent
méthode du widget lorsque vous définissez un nouveau 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 */ });
Empêcher le bouillonnement d'événements
Pour éviter les bulles, vous pouvez return false
ou utiliser Ext.EventObject.preventDefault()
. Afin d'empêcher l'utilisation de l'action par défaut du navigateur Ext.EventObject.stopPropagation()
.
Par exemple, affectons le gestionnaire d'événements click à notre bouton. Et si vous n'avez pas cliqué sur le bouton gauche, empêchez l'action du navigateur par défaut:
myButton.on('click', function(btn, e){
if (e.button !== 0)
e.preventDefault();
});