Ext.js-カスタムイベントとリスナー

イベントは、クラスに何かが発生したときに発生するものです。たとえば、ボタンがクリックされたとき、または要素がレンダリングされる前/後に。

イベントの書き込み方法

リスナーを使用した組み込みイベント
後でイベントを添付する
カスタムイベント

リスナーを使用した組み込みイベント

Ext JSは、Ext JSファイルにイベントとカスタムイベントを書き込むためのリスナープロパティを提供します。

Ext JSでの書き込みリスナー*

listenプロパティをパネルに追加することにより、前のプログラム自体にリスナーを追加します。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>

      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button',

               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button is clicked');
                  }
               }
            });
         });
      </script>
   </head>

   <body>
      <p> Please click the button to see event listener </p>
      <div id = 'helloWorldPanel'/>   <!--  panel will be rendered here-- >
   </body>
</html>

上記のプログラムは、次の結果を生成します-

このようにして、listenersプロパティに複数のイベントを書き込むこともできます。

同じリスナー内の複数のイベント

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>

      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.get('tag2').hide()
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button',

               listeners: {
                  click: function() {
                     this.hide();
                  },
                  hide: function() {
                     Ext.get('tag1').hide();
                     Ext.get('tag2').show();
                  }
               }
            });
         });
      </script>
   </head>

   <body>
      <div id = "tag1">Please click the button to see event listener.</div>
      <div id = "tag2">The button was clicked and now it is hidden.</div>
      <div id = 'helloWorldPanel'/>   <!--  panel will be rendered here-- >
   </body>
</html>

後でイベントを添付する

イベントを記述する以前の方法では、要素の作成時にリスナーでイベントを記述しました。もう1つの方法は、イベントを添付することです。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>

      <script type = "text/javascript">
         Ext.onReady(function() {
            var button = Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button'
            });

           //This way we can attach event to the button after the button is created.
            button.on('click', function() {
               Ext.MessageBox.alert('Alert box', 'Button is clicked');
            });
         });
      </script>
   </head>

   <body>
      <p> Please click the button to see event listener </p>
      <div id = 'helloWorldPanel'/>   <!--  panel will be rendered here-- >
   </body>
</html>

上記のプログラムは、次の結果を生成します-

カスタムイベント

Ext JSでカスタムイベントを記述し、fireEventメソッドでイベントを発生させることができます。次の例では、カスタムイベントを記述する方法について説明します。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>

      <script type = "text/javascript">
         Ext.onReady(function() {
            var button = Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button',

               listeners: {
                  myEvent: function(button) {
                     Ext.MessageBox.alert('Alert box', 'My custom event is called');
                  }
               }
            });
            Ext.defer(function() {
               button.fireEvent('myEvent');
            }, 5000);
         });
      </script>
   </head>

   <body>
      <p> The event will be called after 5 seconds when the page is loaded. </p>
      <div id = 'helloWorldPanel'/>   <!--  panel will be rendered here-- >
   </body>
</html>

ページが読み込まれ、ドキュメントの準備が整うと、ボタンのあるUIページが表示され、5秒後にイベントを発生させると、ドキュメントの準備が整います。 5秒後に警告ボックスが表示されます。

ここでは、カスタムイベント「myEvent」を作成し、button.fireEvent（eventName）;としてイベントを発生させています。

Extjs-events

Ext.js-カスタムイベントとリスナー

イベントの書き込み方法

リスナーを使用した組み込みイベント

後でイベントを添付する

カスタムイベント

目次