[解決済み] ExtJS 4のイベントハンドリングについて

質問

最近ExtJSを学び始めたのですが、Eventの扱い方がわからず困っています。以前のバージョンのExtJSは全く経験がありません。

様々なマニュアルやガイド、ドキュメントページを読んで、使い方は分かったのですが、どのように動作するのかがよく分かりません。旧バージョンのExtJSのチュートリアルはいくつか見つけましたが、ExtJS 4でどの程度適用できるのかがわかりません。

私は特に、次のようなことについての "最終的な言葉" を探しています。

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

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

どのように解決するのですか?

まず、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つのパラメータを持つことができる。

click( 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 をミキシングする必要があります。すべての組み込みウィジェット (パネル、フォーム、ツリー、グリッドなど) には Ext.util.Observable をデフォルトのミキシンとして持っています。

ウィジェットでは、ハンドラを割り当てる方法が2つあります。最初の方法は を使うことです。 メソッド (もしくは addListener ). 例えば Button ウィジェットを作成し click イベントを割り当てます。まず最初に、ハンドラの引数について、イベントのドキュメントを確認する必要があります。

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

もう一つの方法は、ウィジェットの リスナー の設定を使うことです。

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

カスタムイベントの実行

まず最初に、イベントを登録するために addEvents メソッドを使ってイベントを登録します。

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

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

イベントを発生させるには fireEvent メソッドを使用します。

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

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

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

を挿入するのに最適な場所であることは言うまでもありません。 addEvents メソッド呼び出しを挿入するのに最適な場所は、ウィジェットの 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();
});