Sencha Touch - Sự kiện

Sự kiện là thứ gì đó sẽ được kích hoạt khi có điều gì đó xảy ra với lớp học. Ví dụ: khi một nút được nhấp hoặc trước / sau khi một phần tử được hiển thị.

Phương pháp viết sự kiện

Sau đây là các phương pháp viết sự kiện.

Sự kiện tích hợp sử dụng trình nghe.
Đính kèm các sự kiện sau
Sự kiện tùy chỉnh

Sự kiện tích hợp sử dụng trình nghe

Sencha Touch cung cấp thuộc tính người nghe để viết sự kiện và sự kiện tùy chỉnh trong tệp Sencha Touch.

Trình nghe viết trong Sencha Touch

Chúng tôi sẽ thêm trình lắng nghe trong chính chương trình trước đó bằng cách thêm thuộc tính lắng nghe vào bảng điều khiển, được hiển thị như sau:

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

Điều này sẽ tạo ra kết quả sau:

Bằng cách này, chúng ta cũng có thể viết nhiều sự kiện trong thuộc tính người nghe.

Nhiều sự kiện trong cùng một người nghe

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

Nó sẽ tạo ra kết quả sau:

Đính kèm sự kiện sau

Trong phương pháp viết sự kiện trước đây, chúng ta đã viết sự kiện trong các trình lắng nghe tại thời điểm tạo các phần tử.

Cách khác để đính kèm các sự kiện như sau:

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

Nó sẽ tạo ra kết quả sau:

Sự kiện tùy chỉnh

Chúng ta có thể viết các sự kiện tùy chỉnh trong Sencha Touch và kích hoạt các sự kiện bằng phương pháp fireEvent. Ví dụ sau giải thích cách viết sự kiện tùy chỉnh.

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

Khi trang được tải và tài liệu đã sẵn sàng, trang giao diện người dùng có nút sẽ xuất hiện và khi chúng tôi kích hoạt một sự kiện sau 5 giây, khi tài liệu đã sẵn sàng, hộp cảnh báo sẽ xuất hiện sau 5 giây.

Ở đây chúng tôi đã viết sự kiện tùy chỉnh 'myEvent' và chúng tôi đang kích hoạt các sự kiện dưới dạng button.fireEvent (eventName);