Sencha Touch - Acara

Acara adalah sesuatu yang dipecat ketika sesuatu terjadi di kelas. Misalnya, ketika tombol diklik atau sebelum / setelah elemen dirender.

Metode Acara Menulis

Berikut adalah metode penulisan acara.

Peristiwa built-in menggunakan pendengar.
Melampirkan acara nanti
Acara khusus

Peristiwa Bawaan Menggunakan Pendengar

Sencha Touch menyediakan properti pendengar untuk menulis acara dan acara khusus di file Sencha Touch.

Penulisan pendengar di Sencha Touch

Kami akan menambahkan pendengar di program sebelumnya itu sendiri dengan menambahkan properti mendengarkan ke panel, ditunjukkan sebagai berikut -

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

Ini akan menghasilkan hasil sebagai berikut -

Dengan cara ini kita juga bisa menulis banyak kejadian di properti pendengar.

Beberapa peristiwa di pemroses yang sama

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

Ini akan menghasilkan hasil sebagai berikut -

Melampirkan acara nanti

Dalam metode penulisan acara sebelumnya, kami telah menulis acara di pendengar pada saat membuat elemen.

Cara lain untuk melampirkan acara adalah sebagai berikut -

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

Ini akan menghasilkan hasil sebagai berikut -

Acara khusus

Kita dapat menulis peristiwa khusus di Sencha Touch dan mengaktifkan peristiwa dengan metode fireEvent. Contoh berikut menjelaskan cara menulis acara khusus.

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

Setelah halaman dimuat dan dokumen siap, halaman UI dengan tombol akan muncul dan saat kami menjalankan acara setelah 5 detik, setelah dokumen siap, kotak peringatan akan muncul setelah 5 detik.

Di sini kami telah menulis acara khusus 'myEvent' dan kami mengaktifkan acara sebagai button.fireEvent (eventName);