Expliquer ExtJS 4 la gestion des événements

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.L'élément interface. Pour les fins de l'attribution des gestionnaires d'événements, Élément .addListener et Élément .on (ils sont équivalents) ont été créés. Ainsi, par exemple, si nous avons html:

<div id="test_node"></div>

et nous voulons ajouter click gestionnaire d'événement.

Nous allons récupérer Element:

var el = Ext.get('test_node');

Maintenant, nous allons vérifier les docs pour cliquez événement. Il est gestionnaire peut avoir trois paramètres:

cliquez sur( Ext.EventObject e, La t, Objet eOpts )

Sachant tout ce genre de choses que nous pouvons lui attribuer gestionnaire:

//      event name      event handler
el.on(    'click'        , function(e, t, eOpts){
  //handling event here
});

Widgets gestion des événements

Widgets 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é en utilisant Ext.util.Observables 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, ...) a 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 d'utiliser sur de la méthode (ou addListener). Nous allons par exemple créer Button widget et attribuer click cas à elle. 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 les 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);
    }
  }
});

Avis que Button widget est un type spécial de widgets. Cliquez sur l'événement peut être attribuée à ce widget à l'aide de gestionnaire config:

var myButton = Ext.create('Ext.button.Button', {
  text: 'Test button',
  handler : function(btn, e, eOpts) {
    //event handling here
    console.log(btn, e, eOpts);
  }
});

Des é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 la 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 de l'utilisation Ext.EventObject.preventDefault(). Afin d'empêcher le navigateur par défaut de l'action de Ext.EventObject.stopPropagation().

Par exemple assignons le gestionnaire d'événements click 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();
});

Un truc plus pour le contrôleur des écouteurs d'événement.

Vous pouvez utiliser des caractères génériques pour regarder pour un événement à partir de n'importe quel composant:

this.control({
   '*':{ 
       myCustomEvent: this.doSomething
   }
});

Juste deux choses que j'ai trouvé utile de savoir, même si elles ne font pas partie de la question, vraiment.

Vous pouvez utiliser le relayEvents méthode à dire d'un composant à écouter pour certains événements d'un autre composant, et alors le feu de nouveau, comme s'ils proviennent de la première composante. L'API docs donner l'exemple d'une grille de relayer le magasin load événement. Il est assez pratique lors de l'écriture de composants personnalisés qui contiennent plusieurs sous-composants.

Dans l'autre sens, c'est à dire en passant sur les événements reçus par une encapsulation de composants mycmp pour l'un de ses sous-composants subcmp, comme

mycmp.on('show' function (mycmp, eOpts)
{
   mycmp.subcmp.fireEvent('show', mycmp.subcmp, eOpts);
});