最近 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();
});