Tir de l'application des événements à l'échelle

Comment faire pour que les contrôleurs de parler les uns aux autres ...

en plus de la très grande réponse ci-dessus, je tiens à mentionner des événements d'application large qui peuvent être très utiles dans une configuration MVC pour permettre la communication entre les contrôleurs. (extraits 4.1)

disons que nous avons une station de contrôle (exemples MVC Sencha) avec une boîte de sélection:

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]);
    },    
   ...
});

Lorsque la boîte de sélection déclenche un événement de changement, la fonction onStationSelect est déclenché.

dans cette fonction nous voyons:

this.application.fireEvent('stationstart', selection[0]);

cela crée et déclenche un événement d'application large que nous pouvons écouter de n'importe quel autre contrôleur.

ainsi, dans un autre contrôleur, nous pouvons maintenant savoir quand la case station select a été changée. Ceci est fait en écoutant this.application.on comme suit:

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 la selectbox a été modifiée, nous activons maintenant la fonction onStationStart dans le contrôleur Song ...

De la Sencha docs:

les événements D'Application sont extrêmement utiles pour les événements qui ont de nombreux contrôleurs. Au lieu d'écouter pour le même événement de vue dans chacun de ces controllers, un seul controller écoute pour l'événement de vue et déclenche une application-large l'événement que les autres peuvent écouter. Cela permet également aux contrôleurs de communiquer entre eux sans savoir ou en fonction de l'existence de l'autre.

dans mon cas: cliquer sur un noeud d'arbre pour mettre à jour les données dans un panneau de grille.

mise à Jour en 2016 grâce à @gm2008 les commentaires ci-dessous:

en termes de mise à feu des événements personnalisés à l'échelle de l'application, il y a une nouvelle méthode maintenant après ExtJS V5.1 est publié, qui utilise Ext.GlobalEvents .

quand vous tirez des événements, vous pouvez appeler: Ext.GlobalEvents.fireEvent('custom_event');

Lorsque vous enregistrez un gestionnaire de l'événement, vous appelez: Ext.GlobalEvents.on('custom_event', function(arguments){/* handler codes*/}, scope);

cette méthode ne se limite pas aux contrôleurs. N'importe quel component peut gérer un événement personnalisé en mettant l'objet component comme le paramètre d'entrée scope.

trouvé dans Sencha Docs: MVC Part 2

un truc de plus pour les écouteurs d'événements du contrôleur.

vous pouvez utiliser des jokers pour surveiller un événement de n'importe quel composant:

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

je voulais juste ajouter quelques pence aux excellentes réponses ci-dessus.: Si vous travaillez sur pre Extjs 4.1, et que vous n'avez pas d'événements d'application mais que vous en avez besoin, j'ai utilisé une technique très simple qui pourrait aider: Créez un objet simple extensible Observable, et définissez tous les événements de l'application dont vous pourriez avoir besoin. Vous pouvez ensuite lancer ces événements à partir de n'importe où dans votre application, y compris l'élément HTML dom réel et les écouter à partir de n'importe quel composant en relayant les éléments requis de ce composant.

Ext.define('Lib.MessageBus', {
    extend: 'Ext.util.Observable',

    constructor: function() {
        this.addEvents(
            /*
             * describe the event
             */
                  "eventname"

            );
        this.callParent(arguments);
    }
});

alors vous pouvez, de tout autre composant:

 this.relayEvents(MesageBus, ['event1', 'event2'])

et de les tirer de tout composant ou élément dom:

 MessageBus.fireEvent('event1', somearg);

 <input type="button onclick="MessageBus.fireEvent('event2', 'somearg')">

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

vous pouvez utiliser la méthode relayEvents pour dire à un composant d'écouter certains événements d'un autre composant et de les tirer à nouveau comme s'ils provenaient du premier composant. Les docs API donnent l'exemple d'une grille relayant l'événement store load . Il est très pratique pour écrire des composants personnalisés qui encapsulent plusieurs sous-composants.

l'inverse, c'est-à-dire la transmission d'événements reçus par un composant d'encapsulation mycmp à l'un de ses sous-composants subcmp , peut se faire comme ceci

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