javascript - Spiegare la gestione degli eventi di ExtJS 4




event-handling extjs4 (4)

Recentemente ho iniziato a studiare ExtJS e ho difficoltà a capire come gestire gli eventi. Non ho esperienza di versioni precedenti di ExtJS.

Dalla lettura di vari manuali, guide e pagine di documentazione, ho capito come usarlo, ma non sono chiaro su come funziona. Ho trovato diversi tutorial per versioni precedenti di ExtJS, ma non sono sicuro di quanto siano applicabili in ExtJS 4.

Sto specificatamente guardando la "parola finale" su cose come

  • quali argomenti viene superata una funzione di gestione degli eventi? Esiste un set standard di argomenti che vengono sempre superati?
  • come definire gli eventi personalizzati per i componenti personalizzati che scriviamo? come possiamo licenziare questi eventi personalizzati?
  • il valore restituito (vero / falso) influisce sul modo in cui l'evento bolle? In caso contrario, come possiamo controllare gli eventi che ribollono dall'interno o all'esterno del gestore di eventi?
  • c'è un modo standard per registrare i listener di eventi? (Ho incontrato due modi diversi fino adesso, e non sono sicuro del motivo per cui è stato utilizzato ogni metodo).

Ad esempio, questa domanda mi porta a credere che un gestore di eventi possa ricevere parecchi argomenti. Ho visto altri tutorial in cui ci sono solo due argomenti per il gestore. Cosa cambia?


Eventi di applicazione intensi

Come far parlare i controllori l'un l'altro ...

Oltre all'eccellente risposta di cui sopra, voglio menzionare gli eventi a livello di applicazione che possono essere molto utili in una configurazione MVC per consentire la comunicazione tra i controller. (Extjs4.1)

Diciamo che abbiamo una stazione controller (esempi MVC Sencha) con una casella di selezione:

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

Quando la casella di selezione attiva un evento di modifica, viene onStationSelect la funzione onStationSelect .

All'interno di questa funzione vediamo:

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

Questo crea e attiva un evento a livello di applicazione che possiamo ascoltare da qualsiasi altro controller.

Quindi in un altro controller possiamo ora sapere quando la casella di selezione stazione è stata cambiata. Questo viene fatto ascoltando this.application.on come segue:

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

Se la selectbox è stata cambiata, ora onStationStart la funzione onStationStart nel controller Song anche ...

Dai documenti Sencha:

Gli eventi delle applicazioni sono estremamente utili per eventi con molti controller. Invece di ascoltare lo stesso evento di visualizzazione in ciascuno di questi controller, solo un controller ascolta l'evento di visualizzazione e genera un evento a livello di applicazione che gli altri possono ascoltare. Ciò consente inoltre ai controllori di comunicare tra loro senza conoscere o dipendere dall'esistenza dell'altro.

Nel mio caso: fare clic su un nodo dell'albero per aggiornare i dati in un pannello della griglia.

Aggiornamento 2016 grazie a @ gm2008 dai commenti seguenti:

In termini di attivazione di eventi personalizzati a livello di applicazione, ora è disponibile un nuovo metodo dopo la pubblicazione di ExtJS V5.1 , che utilizza Ext.GlobalEvents .

Quando si Ext.GlobalEvents.fireEvent('custom_event'); eventi, è possibile chiamare: Ext.GlobalEvents.fireEvent('custom_event');

Quando registri un gestore dell'evento, chiami: Ext.GlobalEvents.on('custom_event', function(arguments){/* handler codes*/}, scope);

Questo metodo non è limitato ai controller. Qualsiasi componente può gestire un evento personalizzato inserendo l'oggetto componente come ambito del parametro di input.

Trovato in Sencha Docs: MVC Parte 2


Iniziamo descrivendo la gestione degli eventi degli elementi DOM.

Gestione degli eventi del nodo DOM

Prima di tutto non vorresti lavorare direttamente con il nodo DOM. Invece probabilmente vorrai utilizzare Ext.Element interfaccia di Ext.Element . Ai fini dell'assegnazione dei gestori di eventi, Element.addListener e Element.on (questi sono equivalenti) sono stati creati. Quindi, per esempio, se abbiamo html:

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

e vogliamo aggiungere gestore di eventi click .
Recuperiamo l' Element :

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

Ora controlliamo i documenti per l'evento click . Il suo gestore può avere tre parametri:

fare clic su (Ext.EventObject e, HTMLElement t, Object eOpts)

Conoscendo tutte queste cose possiamo assegnare il gestore:

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

Gestione degli eventi dei widget

La gestione degli eventi dei widget è molto simile alla gestione degli eventi dei nodi DOM.

Prima di tutto, la gestione degli eventi dei widget viene realizzata utilizzando il mixin Ext.util.Observable . Per gestire correttamente gli eventi, il widget deve Ext.util.Observable come mixin. Tutti i widget integrati (come Panel, Form, Tree, Grid, ...) hanno Ext.util.Observable come mixin per impostazione predefinita.

Per i widget ci sono due modi per assegnare i gestori. Il primo - è da utilizzare on method (o addListener ). Ad esempio, creiamo il widget Button e assegniamo l'evento click ad esso. Prima di tutto dovresti controllare i documenti dell'evento per gli argomenti del gestore:

fare clic (Ext.button.Button this, Event e, Object eOpts)

Ora usiamo 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);
});

Il secondo modo è utilizzare la configurazione degli listeners del widget:

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

Si noti che il widget Button è un tipo speciale di widget. L'evento Click può essere assegnato a questo widget usando la configurazione del handler :

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

Avvio di eventi personalizzati

Prima di tutto è necessario registrare un evento usando il metodo addEvents :

myButton.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', /* ... */);

L'utilizzo del metodo addEvents è facoltativo. Poiché i commenti a questo metodo dicono che non è necessario utilizzare questo metodo, ma fornisce spazio per la documentazione degli eventi.

Per fireEvent tuo evento usa il metodo fireEvent :

myButton.fireEvent('myspecialevent1', arg1, arg2, arg3, /* ... */);

arg1, arg2, arg3, /* ... */ saranno passati al gestore. Ora possiamo gestire il tuo evento:

myButton.on('myspecialevent1', function(arg1, arg2, arg3, /* ... */) {
  // event handling here
  console.log(arg1, arg2, arg3, /* ... */);
});

Vale la pena ricordare che il posto migliore per l'inserimento della chiamata al metodo addEvents è il metodo initComponent di widget quando si definisce il nuovo 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 */ });

Prevenire il ribollimento degli eventi

Per evitare il bubbling puoi return false o usare Ext.EventObject.preventDefault() . Per impedire l'azione predefinita del browser, utilizzare Ext.EventObject.stopPropagation() .

Ad esempio, assegniamo il gestore di eventi click al nostro pulsante. E se il pulsante sinistro non è stato premuto, previeni l'azione predefinita del browser:

myButton.on('click', function(btn, e){
  if (e.button !== 0)
    e.preventDefault();
});

Un altro trucco per gli ascoltatori di eventi del controller.

Puoi utilizzare i caratteri jolly per guardare un evento da qualsiasi componente:

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

Volevo solo aggiungere un paio di pence alle eccellenti risposte di cui sopra: Se stai lavorando su pre Extjs 4.1 e non hai eventi a livello di applicazione ma ne hai bisogno, ho usato una tecnica molto semplice che potrebbe aiutarti: oggetto semplice che si estende Osservabile e definisce tutti gli eventi di app che potresti aver bisogno in esso. Puoi quindi attivare quegli eventi da qualsiasi punto della tua app, incluso l'effettivo elemento html dom e ascoltarli da qualsiasi componente inoltrando gli elementi richiesti da quel componente.

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

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

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

Quindi puoi, da qualsiasi altro componente:

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

E licenziarli da qualsiasi componente o elemento dom:

 MessageBus.fireEvent('event1', somearg);

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






extjs4