Sencha Touch-이벤트

이벤트는 클래스에 어떤 일이 발생할 때 시작되는 것입니다. 예를 들어, 버튼이 클릭 될 때 또는 요소가 렌더링되기 전 / 후입니다.

이벤트 작성 방법

다음은 이벤트 작성 방법입니다.

리스너를 사용하는 내장 이벤트.
나중에 이벤트 첨부
맞춤 이벤트

리스너를 사용하는 내장 이벤트

Sencha Touch는 Sencha Touch 파일에서 이벤트 및 사용자 정의 이벤트를 작성하기위한 리스너 속성을 제공합니다.

Sencha Touch에서 청취자 작성

다음과 같이 패널에 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>

이것은 다음 결과를 생성합니다-

이렇게하면 listeners 속성에 여러 이벤트를 작성할 수도 있습니다.

동일한 리스너의 여러 이벤트

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