Sencha Touch - Événements

Les événements sont quelque chose qui est déclenché quand quelque chose arrive à la classe. Par exemple, lorsqu'un bouton est cliqué ou avant / après le rendu d'un élément.

Méthodes d'écriture des événements

Voici les méthodes d'écriture des événements.

Événements intégrés utilisant des écouteurs.
Joindre des événements plus tard
Événements personnalisés

Événements intégrés utilisant des écouteurs

Sencha Touch fournit une propriété d'écoute pour écrire des événements et des événements personnalisés dans des fichiers Sencha Touch.

Écriture de l'auditeur dans Sencha Touch

Nous ajouterons l'auditeur dans le programme précédent lui-même en ajoutant la propriété listen au panneau, comme suit -

<!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>

Cela produira le résultat suivant -

De cette façon, nous pouvons également écrire plusieurs événements dans la propriété des écouteurs.

Plusieurs événements dans le même auditeur

<!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>

Il produira le résultat suivant -

Joindre un événement plus tard

Dans la méthode précédente d'écriture d'événements, nous avons écrit des événements dans les écouteurs au moment de la création des éléments.

L'autre façon d'attacher des événements est la suivante -

<!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>

Il produira le résultat suivant -

Événements personnalisés

Nous pouvons écrire des événements personnalisés dans Sencha Touch et déclencher les événements avec la méthode fireEvent. L'exemple suivant explique comment écrire des événements personnalisés.

<!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>

Une fois la page chargée et le document prêt, la page d'interface utilisateur avec bouton apparaîtra et comme nous déclenchons un événement après 5 secondes, une fois que le document est prêt, la boîte d'alerte apparaîtra après 5 secondes.

Ici, nous avons écrit l'événement personnalisé 'myEvent' et nous déclenchons des événements en tant que button.fireEvent (eventName);