☰

ExtJS 4のイベント処理について説明する 質問する

tag-icon • tag-icon javascript extjs event-handling extjs4
ExtJS 4のイベント処理について説明する 質問する

最近 ExtJS を学び始めたのですが、イベントの処理方法がわからず困っています。ExtJS の以前のバージョンを使用した経験はありません。

さまざまなマニュアル、ガイド、ドキュメント ページを読んで、使い方はわかりましたが、仕組みがよくわかりません。ExtJS の古いバージョン用のチュートリアルをいくつか見つけましたが、ExtJS 4 にどの程度適用できるかわかりません。

私は特に次のようなことに関する「最終的な判断」に注目しています

  • イベント処理関数にはどのような引数が渡されますか? 常に渡される引数の標準セットはありますか?
  • 作成したカスタム コンポーネントのカスタム イベントを定義するにはどうすればよいでしょうか? これらのカスタム イベントをどのように起動すればよいでしょうか?
  • 戻り値 (true/false) はイベントのバブリング方法に影響しますか? そうでない場合、イベント ハンドラーの内外からイベントのバブリングを制御するにはどうすればよいでしょうか?
  • イベント リスナーを登録する標準的な方法はありますか? (これまでに 2 つの異なる方法を見つけましたが、それぞれの方法が使用された理由はわかりません)。

例えば、この質問イベント ハンドラーはかなりの数の引数を受け取ることができると思います。ハンドラーに引数が 2 つしかない他のチュートリアルを見たことがあります。何が変わるのでしょうか?

ベストアンサー1

まず、DOM 要素のイベント処理について説明します。

DOMノードイベント処理

まず、DOMノードを直接操作したくないでしょう。代わりに、Ext.Elementインターフェース。イベントハンドラを割り当てるために、Element.addListenerそしてElement.on(これらは同等です) が作成されました。たとえば、次のような HTML があるとします。

<div id="test_node"></div>

clickイベント ハンドラーを追加したいと思います。
以下を取得してみましょうElement:

var el = Ext.get('test_node');

それではドキュメントを確認してみましょうclickイベント。ハンドラには 3 つのパラメータがあります。

クリック( Ext.EventObject e, HTMLElement t, Object eOpts )

これらすべてを知っていれば、ハンドラーを割り当てることができます。

//       event name      event handler
el.on(    'click'        , function(e, t, eOpts){
  // handling event here
});

ウィジェットのイベント処理

ウィジェットのイベント処理は、DOM ノードのイベント処理とほぼ同様です。

まず、ウィジェットのイベント処理は、Ext.util.Observableミックスイン。イベントを適切に処理するには、ウィジェットExt.util.Observableにミックスインが含まれている必要があります。すべての組み込みウィジェット (Panel、Form、Tree、Grid など) には、Ext.util.Observableデフォルトでミックスインが含まれています。

ウィジェットにはハンドラを割り当てる方法が2つあります。1つ目は、の上メソッド (またはaddListener) を使用します。たとえば、Buttonウィジェットを作成し、clickそれにイベントを割り当ててみましょう。まず、ハンドラーの引数についてはイベントのドキュメントを確認する必要があります。

クリック( Ext.button.Button this, イベント e, オブジェクト eOpts )

では、以下を使ってみましょうon:

var myButton = Ext.create('Ext.button.Button', {
  text: 'Test button'
});
myButton.on('click', function(btn, e, eOpts) {
  // event handling here
  console.log(btn, e, eOpts);
});

2つ目の方法はウィジェットを使うことですリスナー設定:

var myButton = Ext.create('Ext.button.Button', {
  text: 'Test button',
  listeners : {
    click: function(btn, e, eOpts) {
      // event handling here
      console.log(btn, e, eOpts);
    }
  }
});

Buttonウィジェットは特別な種類のウィジェットであることに注意してください。クリックイベントは、このウィジェットに割り当てることができます。handler設定:

var myButton = Ext.create('Ext.button.Button', {
  text: 'Test button',
  handler : function(btn, e, eOpts) {
    // event handling here
    console.log(btn, e, eOpts);
  }
});

カスタムイベントの発動

まず、イベントを登録する必要がありますイベントを追加方法：

myButton.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', /* ... */);

このaddEventsメソッドの使用はオプションです。このメソッドのコメントにあるように、このメソッドを使用する必要はありませんが、イベントのドキュメント化のための場所を提供します。

イベントを起動するには火災イベント方法：

myButton.fireEvent('myspecialevent1', arg1, arg2, arg3, /* ... */);

arg1, arg2, arg3, /* ... */ハンドラーに渡されます。これでイベントを処理できます。

myButton.on('myspecialevent1', function(arg1, arg2, arg3, /* ... */) {
  // event handling here
  console.log(arg1, arg2, arg3, /* ... */);
});

挿入するのに最適な場所はイベントを追加メソッド呼び出しは、initComponent新しいウィジェットを定義するときのウィジェットのメソッドです。

Ext.define('MyCustomButton', {
  extend: 'Ext.button.Button',
  // ... other configs,
  initComponent: function(){
    this.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', /* ... */);
    // ...
    this.callParent(arguments);
  }
});
var myButton = Ext.create('MyCustomButton', { /* configs */ });

イベントのバブリングを防ぐ

泡立ちを防ぐにはreturn false、Ext.EventObject.preventDefault()ブラウザのデフォルトの動作を防ぐにはExt.EventObject.stopPropagation()。

たとえば、ボタンにクリック イベント ハンドラーを割り当てます。左ボタンがクリックされなかった場合は、デフォルトのブラウザー アクションが実行されないようにします。

myButton.on('click', function(btn, e){
  if (e.button !== 0)
    e.preventDefault();
});

おすすめ記事