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）;としてイベントを発生させています。

Sencha-touch-events

目次