Sencha Touch - Eventi

Gli eventi sono qualcosa che viene licenziato quando succede qualcosa alla classe. Ad esempio, quando si fa clic su un pulsante o prima / dopo il rendering di un elemento.

Metodi di scrittura di eventi

Di seguito sono riportati i metodi di scrittura degli eventi.

  • Eventi incorporati che utilizzano ascoltatori.
  • Allegare eventi in un secondo momento
  • Eventi personalizzati

Eventi incorporati che utilizzano ascoltatori

Sencha Touch fornisce proprietà listener per scrivere eventi ed eventi personalizzati nei file Sencha Touch.

Ascoltatore di scrittura in Sencha Touch

Aggiungeremo l'ascoltatore nel programma precedente stesso aggiungendo la proprietà di ascolto al pannello, mostrato come segue:

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

Questo produrrà il seguente risultato:

In questo modo possiamo anche scrivere più eventi nella proprietà listener.

Più eventi nello stesso 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>

Produrrà il seguente risultato:

Allegare l'evento in un secondo momento

Nel metodo precedente di scrittura degli eventi, abbiamo scritto eventi negli ascoltatori al momento della creazione degli elementi.

L'altro modo per allegare eventi è il seguente:

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

Produrrà il seguente risultato:

Eventi personalizzati

Possiamo scrivere eventi personalizzati in Sencha Touch e attivare gli eventi con il metodo fireEvent. L'esempio seguente spiega come scrivere eventi personalizzati.

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

Una volta che la pagina è caricata e il documento è pronto, apparirà la pagina dell'interfaccia utente con il pulsante e poiché stiamo attivando un evento dopo 5 secondi, una volta che il documento è pronto apparirà la casella di avviso dopo 5 secondi.

Qui abbiamo scritto l'evento personalizzato "myEvent" e stiamo attivando gli eventi come button.fireEvent (eventName);