Nous allons commencer par décrire les éléments du DOM' la gestion des événements.
Nœud DOM la gestion des événements
Tout d'abord, vous ne voulez pas travailler avec nœud DOM directement. Au lieu de cela, vous allez probablement vouloir utiliser Ext.Element interface. Pour les fins de l'attribution des gestionnaires d'événements, Element.addListener et Element.on (ils sont équivalents) ont été créés. Ainsi, par exemple, si nous avons le html:
<div id="test_node"></div>
et nous voulons ajouter click de gestionnaire d'événements.
Nous allons récupérer Element:
var el = Ext.get('test_node');
Maintenant, nous allons vérifier les docs pour click événement. Il est gestionnaire peut avoir trois paramètres:
cliquez sur( Ext.EventObject e, La t, Objet eOpts )
Sachant tout cela, des choses qu'on peut attribuer gestionnaire:
// event name event handler
el.on( 'click' , function(e, t, eOpts){
// handling event here
});
Les Widgets de la gestion des événements
Les Widgets de la gestion des événements est à peu près similaire pour les nœuds DOM la gestion des événements.
Tout d'abord, les widgets de la gestion des événements est réalisé par l'utilisation de l' Ext.util.Observable mixin. Afin de gérer les événements correctement votre widget doivent contenant Ext.util.Observable comme un mixin. Le tout intégré dans les widgets (comme le Panneau, la Forme, l'Arbre, Grille, ...) Ext.util.Observable comme un mixin par défaut.
Pour les widgets, il y a deux façons de l'attribution des gestionnaires. La première est à utiliser sur la méthode (ou addListener). Nous allons par exemple créer Button widget et attribuer click événement. Tout d'abord, vous devez vérifier événement docs pour le gestionnaire d'arguments:
cliquez sur( Ext.bouton.Ce bouton, l'Événement e, Objet eOpts )
Maintenant, nous allons utiliser 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 du widget auditeurs config:
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 Button widget est un type spécial de widgets. Cliquez sur l'événement peut être attribuée à ce widget à l'aide de 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);
}
});
Les événements personnalisés de tir
Tout d'abord vous devez vous inscrire à un événement à l'aide addEvents méthode:
myButton.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', /* ... */);
À l'aide de l' addEvents méthode est facultative. Comme des commentaires de cette méthode de dire qu'il n'est pas nécessaire d'utiliser cette méthode, mais elle fournit un lieu pour les événements de la documentation.
Mettre le feu à votre cas d'utilisation fireEvent méthode:
myButton.fireEvent('myspecialevent1', arg1, arg2, arg3, /* ... */);
arg1, arg2, arg3, /* ... */ sera passé dans gestionnaire. Maintenant, nous pouvons nous occuper de votre événement:
myButton.on('myspecialevent1', function(arg1, arg2, arg3, /* ... */) {
// event handling here
console.log(arg1, arg2, arg3, /* ... */);
});
Il est important de mentionner que le meilleur endroit pour l'insertion addEvents appel de la méthode du widget initComponent méthode 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 */ });
La prévention de remontée d'événements
Pour éviter le bouillonnement vous pouvez return false ou utiliser Ext.EventObject.preventDefault(). Afin d'empêcher le navigateur par défaut de l'action de Ext.EventObject.stopPropagation().
Pour exemple, nous allons attribuer cliquez sur gestionnaire d'événement pour notre bouton. Et si ce n'est de gauche le bouton a été cliqué empêcher le navigateur par défaut de l'action:
myButton.on('click', function(btn, e){
if (e.button !== 0)
e.preventDefault();
});
