Strzelanie aplikacji wide events

Jak sprawić, by kontrolerzy ze sobą rozmawiali ...

Oprócz bardzo świetnej odpowiedzi powyżej chcę wspomnieć o zdarzeniach aplikacji, które mogą być bardzo przydatne w konfiguracji MVC, aby umożliwić komunikację między kontrolerami. (extjs4. 1)

Powiedzmy, że mamy stację kontrolera (przykłady Sencha MVC) z polem wyboru:

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

Gdy pole select uruchamia Zdarzenie change, Funkcja onStationSelect jest zwolniony.

W obrębie tej funkcji widzimy:

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

To tworzy i wywołuje zdarzenie całej aplikacji, które możemy odsłuchać z dowolnego innego kontrolera.

Tak więc w innym kontrolerze możemy teraz wiedzieć, kiedy pole wyboru stacji zostało zmienione. Można to zrobić poprzez słuchanie this.application.on w następujący sposób:

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?');
    },
}

Jeśli pole wyboru zostało zmienione, uruchamiamy teraz funkcję onStationStart również w kontrolerze Song...

Od Sencha docs:

zdarzenia aplikacji są niezwykle przydatne dla zdarzeń, które mają wiele kontrolerów. Zamiast nasłuchiwać tego samego zdarzenia view w każdym z tych kontrolerów, tylko jeden kontroler nasłuchuje zdarzenia view i wywołuje zdarzenie dla całej aplikacji, którego inne mogą nasłuchać. Pozwala to również kontrolerom komunikować się ze sobą bez wiedzy o istnieniu innych lub w zależności od ich istnienia.

W moim przypadku: kliknięcie na węzeł drzewa w celu aktualizacji danych w Panel siatki.

Aktualizacja 2016 dzięki @ gm2008 z komentarzy poniżej:

Jeśli chodzi o uruchamianie niestandardowych zdarzeń w całej aplikacji, po opublikowaniu ExtJS V5.1 jest nowa metoda, która używa Ext.GlobalEvents.

Kiedy odpalasz zdarzenia, możesz zadzwonić: Ext.GlobalEvents.fireEvent('custom_event');

Kiedy rejestrujesz obsługę zdarzenia, dzwonisz: Ext.GlobalEvents.on('custom_event', function(arguments){/* handler codes*/}, scope);

Ta metoda nie jest ograniczona do kontrolerów. Każdy komponent może obsłużyć niestandardowe zdarzenie poprzez umieszczenie obiekt komponentu jako zakres parametru wejściowego.

Znaleziono w Sencha Docs: MVC Part 2

Jeszcze jedna sztuczka dla Controller event listeners.

Możesz używać symboli wieloznacznych do oglądania zdarzenia z dowolnego komponentu:

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

Chciałem tylko dodać kilka groszy do doskonałych odpowiedzi powyżej: Jeśli pracujesz na Pre Extjs 4.1 i nie masz zdarzeń w całej aplikacji, ale ich potrzebujesz, używam bardzo prostej techniki, która może pomóc: Utwórz prosty obiekt rozszerzający obserwowalny i zdefiniuj w nim dowolne zdarzenia o zasięgu aplikacji. Następnie można uruchomić te zdarzenia z dowolnego miejsca w aplikacji, w tym rzeczywisty element HTML dom i słuchać ich z dowolnego komponentu, przekazując wymagane elementy z tego komponent.

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

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

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

Wtedy można, z dowolnego innego składnika:

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

I odpalić je z dowolnego elementu lub elementu dom:

 MessageBus.fireEvent('event1', somearg);

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

Jeszcze tylko dwie rzeczy, które pomogły mi wiedzieć, nawet jeśli nie są częścią pytania, naprawdę.

Możesz użyć metody relayEvents, aby powiedzieć komponentowi, aby nasłuchał pewnych zdarzeń innego komponentu, a następnie odpalił je ponownie, tak jakby pochodzą z pierwszego komponentu. Dokumentacja API zawiera przykład siatki przekazującej Zdarzenie store load. Jest to bardzo przydatne przy pisaniu niestandardowych komponentów, które zawierają kilka podskładników.

Odwrotnie, tzn. przechodząc dalej zdarzenia odbierane przez komponent enkapsulujący mycmp do jednego z jego podskładników subcmp, można wykonać w ten sposób

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