Sencha Touch - Ereignisse

Ereignisse werden ausgelöst, wenn der Klasse etwas passiert. Zum Beispiel, wenn auf eine Schaltfläche geklickt wird oder bevor / nachdem ein Element gerendert wurde.

Methoden zum Schreiben von Ereignissen

Im Folgenden finden Sie die Methoden zum Schreiben von Ereignissen.

Integrierte Ereignisse mit Listenern.
Ereignisse später anhängen
Benutzerdefinierte Ereignisse

Integrierte Ereignisse mit Listenern

Sencha Touch bietet Listener-Eigenschaften zum Schreiben von Ereignissen und benutzerdefinierten Ereignissen in Sencha Touch-Dateien.

Listener in Sencha Touch schreiben

Wir werden den Listener im vorherigen Programm selbst hinzufügen, indem wir dem Panel die Listen-Eigenschaft hinzufügen, die wie folgt dargestellt wird:

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha', launch: function() {
               Ext.create('Ext.Panel', {
                  html: 'My Panel', fullscreen: true, listeners: {
                     painted: function() {
                        Ext.Msg.alert('I was painted to the screen');
                     }
                  }
               });
            }
         });
      </script> 
   </head>
</html>

Dies führt zu folgendem Ergebnis:

Auf diese Weise können wir auch mehrere Ereignisse in die Listener-Eigenschaft schreiben.

Mehrere Ereignisse im selben Listener

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">   
         Ext.application({
            name: 'Sencha',
            launch: function() {
               var myButton = Ext.Viewport.add({
                  xtype: 'button',
                  centered: true,
                  text: 'Click me'
               });

               myButton.on({
                  tap: function() {
                     var randomWidth = 100 + Math.round(Math.random() * 200);
                     this.setWidth(randomWidth);
                  },
                  widthchange: function(button, newWidth, oldWidth) {
                     alert('My width changed from ' + oldWidth + ' to ' + newWidth);
                  }
               });
            }
         });       
      </script> 
   </head>
</html>

Es wird das folgende Ergebnis erzeugt -

Ereignis später anhängen

In der vorherigen Methode zum Schreiben von Ereignissen haben wir Ereignisse zum Zeitpunkt der Erstellung von Elementen in Listener geschrieben.

Die andere Möglichkeit, Ereignisse anzuhängen, ist wie folgt:

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               var myButton = Ext.Viewport.add({
                  xtype: 'button',
                  centered: true,
                  text: 'Click me'
               });
               
               myButton.on('tap', function() {
                  alert("Event listener attached by .on");
               });
            }
         });
      </script> 
   </head>
</html>

Es wird das folgende Ergebnis erzeugt -

Benutzerdefinierte Ereignisse

Wir können benutzerdefinierte Ereignisse in Sencha Touch schreiben und die Ereignisse mit der fireEvent-Methode auslösen. Im folgenden Beispiel wird erläutert, wie Sie benutzerdefinierte Ereignisse schreiben.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               var myButton = Ext.Viewport.add({
                  xtype: 'button',
                  centered: true,
                  text: "Just wait 5 seconds",

                  listeners: {
                     myEvent: function(button, points) {
                        alert('myEvent was fired! You score ' + points + ' points');
                     }
                  }
               });

               Ext.defer(function() {
                  var number = Math.ceil(Math.random() * 100);
                  myButton.fireEvent('myEvent', myButton, number);
               }, 5000);
            }
         });
      </script> 
   </head>
</html>

Sobald die Seite geladen und das Dokument bereit ist, wird die UI-Seite mit der Schaltfläche angezeigt. Wenn wir nach 5 Sekunden ein Ereignis auslösen, wird nach 5 Sekunden das Warnfeld angezeigt.

Hier haben wir das benutzerdefinierte Ereignis 'myEvent' geschrieben und lösen Ereignisse als button.fireEvent (eventName) aus.