Ich habe vor kurzem angefangen, ExtJS zu lernen, und habe Probleme, den Umgang mit Ereignissen zu verstehen. Ich habe keine Erfahrung mit früheren Versionen von ExtJS.
Durch das Lesen verschiedener Handbücher, Anleitungen und Dokumentationsseiten habe ich herausgefunden, wie man es verwendet, aber ich bin mir nicht sicher, wie es funktioniert. Ich habe mehrere Tutorials für ältere Versionen von ExtJS gefunden, bin mir aber nicht sicher, wie sie in ExtJS 4 anwendbar sind.
Ich schaue speziell auf das "letzte Wort" zu Dingen wie
- Welche Argumente werden einer Ereignisbehandlungsfunktion übergeben? Gibt es einen Standardsatz von Argumenten, die immer übergeben werden?
- Wie definiere ich benutzerdefinierte Ereignisse für benutzerdefinierte Komponenten, die wir schreiben? Wie können wir diese benutzerdefinierten Ereignisse auslösen?
- Beeinflusst der Rückgabewert (wahr / falsch), wie das Ereignis sprudelt? Wenn nicht, wie können wir das Sprudeln von Ereignissen innerhalb oder außerhalb des Ereignishandlers steuern?
- Gibt es eine Standardmethode zum Registrieren von Ereignis-Listenern? (Ich bin bis jetzt auf zwei verschiedene Arten gestoßen, und ich bin mir nicht sicher, warum jede Methode verwendet wurde).
Zum Beispiel dieser Frage führt mich zu glauben , dass ein Event - Handler schon einige Argumente empfangen können. Ich habe andere Tutorials gesehen, in denen der Handler nur zwei Argumente hat. Was ändert sich?
javascript
extjs
event-handling
extjs4
jrharshath
quelle
quelle
Antworten:
Beginnen wir mit der Beschreibung der Ereignisbehandlung von DOM-Elementen.
Behandlung von DOM-Knotenereignissen
Zunächst möchten Sie nicht direkt mit dem DOM-Knoten arbeiten. Stattdessen möchten Sie wahrscheinlich die
Ext.Element
Schnittstelle verwenden. Zum Zuweisen von Ereignishandlern wurdenElement.addListener
undElement.on
(diese sind gleichwertig) erstellt. Also zum Beispiel, wenn wir HTML haben:und wir wollen
click
Event-Handler hinzufügen .Lassen Sie uns abrufen
Element
:Lassen Sie uns nun die Dokumente auf
click
Ereignisse überprüfen . Der Handler kann drei Parameter haben:Wenn wir all diese Dinge kennen, können wir den Handler zuweisen:
Widgets Ereignisbehandlung
Die Ereignisbehandlung von Widgets ist der Ereignisbehandlung von DOM-Knoten ziemlich ähnlich.
Zunächst wird die Ereignisbehandlung von Widgets
Ext.util.Observable
mithilfe von Mixin realisiert . Um Ereignisse richtig zu behandeln, muss Ihr WidgetExt.util.Observable
als Mixin enthalten sein. Alle integrierten Widgets (wie Panel, Formular, Baum, Raster, ...) sindExt.util.Observable
standardmäßig als Mixin enthalten.Für Widgets gibt es zwei Möglichkeiten, Handler zuzuweisen. Die erste - ist auf Methode (oder
addListener
) zu verwenden. Lassen Sie uns zum Beispiel einButton
Widget erstellen und ihm einclick
Ereignis zuweisen . Zunächst sollten Sie die Dokumente des Ereignisses auf die Argumente des Handlers überprüfen:Verwenden wir nun
on
:Die zweite Möglichkeit besteht darin, die Listener- Konfiguration des Widgets zu verwenden :
Beachten Sie, dass
Button
Widget eine spezielle Art von Widgets ist. Klickereignis kann diesem Widget mithilfe vonhandler
config zugewiesen werden :Benutzerdefinierte Ereignisse werden ausgelöst
Zunächst müssen Sie ein Ereignis mit der Methode addEvents registrieren :
Die Verwendung der
addEvents
Methode ist optional. Wie Kommentare zu dieser Methode besagen, muss diese Methode nicht verwendet werden, bietet jedoch Platz für die Dokumentation von Ereignissen.Verwenden Sie die fireEvent- Methode, um Ihre Veranstaltung auszulösen :
arg1, arg2, arg3, /* ... */
wird an den Handler übergeben. Jetzt können wir Ihre Veranstaltung abwickeln:Es ist erwähnenswert, dass der beste Ort zum Einfügen des addEvents- Methodenaufrufs die Widget-
initComponent
Methode ist, wenn Sie ein neues Widget definieren:Verhindern von Ereignisblasen
Um ein Sprudeln zu verhindern, können
return false
oder verwenden SieExt.EventObject.preventDefault()
. Um die Standardaktion des Browsers zu verhindern, verwenden SieExt.EventObject.stopPropagation()
.Weisen Sie beispielsweise unserer Schaltfläche einen Klickereignishandler zu. Wenn nicht auf die linke Schaltfläche geklickt wurde, wird die Standardaktion des Browsers verhindert:
quelle
Anwendungsweite Ereignisse auslösen
Wie man Controller dazu bringt, miteinander zu sprechen ...
Zusätzlich zu der oben sehr guten Antwort möchte ich anwendungsweite Ereignisse erwähnen, die in einem MVC-Setup sehr nützlich sein können, um die Kommunikation zwischen Controllern zu ermöglichen. (extjs4.1)
Nehmen wir an, wir haben eine Controller-Station (Sencha MVC-Beispiele) mit einem Auswahlfeld:
Wenn das Auswahlfeld ein Änderungsereignis auslöst, wird die Funktion
onStationSelect
ausgelöst.Innerhalb dieser Funktion sehen wir:
Dadurch wird ein anwendungsweites Ereignis erstellt und ausgelöst, das wir von jedem anderen Controller abhören können.
Somit können wir in einem anderen Controller jetzt wissen, wann das Stationsauswahlfeld geändert wurde. Dies geschieht durch Anhören
this.application.on
wie folgt:Wenn die Auswahlbox geändert wurde, wird jetzt auch die Funktion
onStationStart
in der Steuerung ausgelöstSong
...Aus den Sencha-Dokumenten:
Anwendungsereignisse sind äußerst nützlich für Ereignisse mit vielen Controllern. Anstatt in jedem dieser Controller auf dasselbe Ansichtsereignis zu warten, wartet nur ein Controller auf das Ansichtsereignis und löst ein anwendungsweites Ereignis aus, auf das die anderen warten können. Dies ermöglicht es den Steuerungen auch, miteinander zu kommunizieren, ohne über die Existenz des anderen Bescheid zu wissen oder davon abhängig zu sein.
In meinem Fall: Klicken Sie auf einen Baumknoten, um die Daten in einem Rasterfeld zu aktualisieren.
Update 2016 dank @ gm2008 aus den Kommentaren unten:
In Bezug auf das Auslösen anwendungsweiter benutzerdefinierter Ereignisse gibt es jetzt nach der Veröffentlichung von ExtJS V5.1 eine neue Methode , die verwendet wird
Ext.GlobalEvents
.Wenn Sie Ereignisse auslösen, können Sie Folgendes aufrufen:
Ext.GlobalEvents.fireEvent('custom_event');
Wenn Sie einen Handler des Ereignisses registrieren, rufen Sie Folgendes auf:
Ext.GlobalEvents.on('custom_event', function(arguments){/* handler codes*/}, scope);
Diese Methode ist nicht auf Controller beschränkt. Jede Komponente kann ein benutzerdefiniertes Ereignis verarbeiten, indem das Komponentenobjekt als Eingabeparameterbereich festgelegt wird.
Gefunden in Sencha Docs: MVC Part 2
quelle
Ext.GlobalEvents.fireEvent('custom_event');
Wenn Sie einen Handler des Ereignisses registrieren, rufen Sie an.Ext.GlobalEvents.on('custom_event', function(arguments){/* handler codes*/}, scope};
Hier ist eine Geige . Diese Methode ist nicht auf Controller beschränkt. Jede Komponente kann ein benutzerdefiniertes Ereignis verarbeiten, indem das Komponentenobjekt als Eingabeparameter festgelegt wirdscope
. Die Frage sollte erneut geöffnet werden.Ein weiterer Trick für Controller-Ereignis-Listener.
Sie können Platzhalter verwenden, um von einer beliebigen Komponente aus nach einem Ereignis zu suchen:
quelle
Ich wollte nur ein paar Pence zu den hervorragenden Antworten oben hinzufügen: Wenn Sie an Pre Extjs 4.1 arbeiten und keine anwendungsweiten Ereignisse haben, diese aber benötigen, habe ich eine sehr einfache Technik verwendet, die helfen könnte: Erstellen Sie eine einfaches Objekt, das Observable erweitert, und definieren Sie alle app-weiten Ereignisse, die Sie möglicherweise darin benötigen. Sie können diese Ereignisse dann von einer beliebigen Stelle in Ihrer App aus auslösen, einschließlich des tatsächlichen HTML-Dom-Elements, und sie von einer beliebigen Komponente abhören, indem Sie die erforderlichen Elemente von dieser Komponente weiterleiten.
Dann können Sie aus jeder anderen Komponente:
Und feuern Sie sie von jeder Komponente oder jedem dom-Element ab:
quelle
Nur noch zwei Dinge, die ich hilfreich fand, auch wenn sie nicht wirklich Teil der Frage sind.
Mit dieser
relayEvents
Methode können Sie eine Komponente anweisen, auf bestimmte Ereignisse einer anderen Komponente zu warten und diese dann erneut auszulösen, als ob sie von der ersten Komponente stammen. Die API-Dokumente enthalten das Beispiel eines Rasters, das das Speicherereignis weiterleitetload
. Dies ist sehr praktisch, wenn Sie benutzerdefinierte Komponenten schreiben, die mehrere Unterkomponenten enthalten.Der umgekehrte Vorgang, dh das Weiterleiten von Ereignissen, die von einer Kapselungskomponente empfangen wurden,
mycmp
an eine ihrer Unterkomponentensubcmp
, kann auf diese Weise erfolgenquelle