Sencha Touch - กิจกรรม

เหตุการณ์คือสิ่งที่เกิดขึ้นเมื่อมีบางสิ่งเกิดขึ้นกับชั้นเรียน ตัวอย่างเช่นเมื่อมีการคลิกปุ่มหรือก่อน / หลังการแสดงผลองค์ประกอบ

วิธีการเขียนเหตุการณ์

ต่อไปนี้เป็นวิธีการเขียนเหตุการณ์

เหตุการณ์ในตัวโดยใช้ผู้ฟัง
การแนบกิจกรรมในภายหลัง
เหตุการณ์ที่กำหนดเอง

เหตุการณ์ในตัวโดยใช้ Listeners

Sencha Touch ให้คุณสมบัติผู้ฟังสำหรับการเขียนเหตุการณ์และเหตุการณ์ที่กำหนดเองในไฟล์ Sencha Touch

การเขียนผู้ฟังใน Sencha Touch

เราจะเพิ่ม Listener ในโปรแกรมก่อนหน้านี้เองโดยการเพิ่มคุณสมบัติ listen ในพาเนลดังต่อไปนี้ -

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

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

วิธีนี้เรายังสามารถเขียนหลายเหตุการณ์ในคุณสมบัติผู้ฟัง

หลายเหตุการณ์ในผู้ฟังคนเดียวกัน

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

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

กำลังแนบกิจกรรมในภายหลัง

ในวิธีการเขียนเหตุการณ์ก่อนหน้านี้เราได้เขียนเหตุการณ์ในผู้ฟังในเวลาที่สร้างองค์ประกอบ

อีกวิธีหนึ่งในการแนบกิจกรรมมีดังนี้ -

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

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

เหตุการณ์ที่กำหนดเอง

เราสามารถเขียนเหตุการณ์ที่กำหนดเองใน Sencha Touch และเริ่มเหตุการณ์ด้วยเมธอด fireEvent ตัวอย่างต่อไปนี้อธิบายวิธีการเขียนเหตุการณ์ที่กำหนดเอง

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

เมื่อโหลดหน้าและเอกสารพร้อมแล้วหน้า UI พร้อมปุ่มจะปรากฏขึ้นและในขณะที่เรากำลังเริ่มเหตุการณ์หลังจาก 5 วินาทีเมื่อเอกสารพร้อมแล้วกล่องแจ้งเตือนจะปรากฏขึ้นหลังจาก 5 วินาที

ที่นี่เราได้เขียนเหตุการณ์ที่กำหนดเอง 'myEvent' และเรากำลังเริ่มต้นเหตุการณ์เป็น button.fireEvent (eventName);