Ext.Elementのイベントに対する処理の登録方法

Ext.Elementもしくは、Ext.EventManagerに用意されているaddListener() かon()を利用して、Elementに対応するイベントを登録します。（on()はaddListener()の別名になりどちらも同じ処理になります）
※イベントタイプはDom Level2で規定されているイベントタイプと同じようです。

Ext.EventManagerは引数にイベントを登録する要素のID（もしくは要素そのもの（HTMLElement)）を指定する以外はExt.Elementで指定するのと同じなのですが、ExtJS2.0のAPIドキュメントでは推奨しないと書かれていたので、ここではExt.ElementのaddListener()を使ったイベント処理の登録方法をメモしておきます。


addListener( String eventName, Function fn, [Object scope], [Object options] ) : void

• String eventName : 登録対象のイベント名
• Function fn : イベントに対する処理を行う関数オブジェクト
• [Object Scope] : 関数実行時のスコープ
• [Object options]: イベントに対するオプション

記述例）clickイベントに対して、処理を登録

Ext.onReady(function(){
var myDiv=Ext.get('mydiv');
myDiv.addListner('click',function(){alert("Click!!"),this,{delay: 100});
myDiv.addListner('dblclick',function(){alert("Double Click!!"),this,{delay: 100}});
myDiv.addListner('mouseover',function(){alert("MouseOver!!"),this,{delay: 100}});
});

複数のイベントを一度に登録したい場合は、引数にオブジェクトを指定することでできます。
先ほどの例を書き換えると

Ext.onReady(function(){
var myDiv=Ext.get('mydiv');
myDiv.addListner({
'click':{
fn:function(){alert("Click!!"),this}),
scope:this,
delay: 100
},
'dblclick':{
fn:function(){alert("Double Click!!"),this}),
scope:this,
delay: 100
},
'mouseover':{
fn:function(){alert("MouseOver!!"),this}),
scope:this,
delay: 100
}
}
});

こんな書き方もできます。

Ext.onReady(function(){
var myDiv=Ext.get('mydiv');
myDiv.addListner({
'click':function(){alert("Click!!"),this}),
'dblclick':function(){alert("Double Click!!"),this}),
'mouseover':function(){alert("MouseOver!!"),this}),
scope:this,
delay: 100
}
});

イベントに対するオプションなどを個別に設定する必要がない場合は、これが短くていいかも。

複数の要素に対して同じイベント処理の登録を行う場合は、Ext.select()で設定した要素のCSSセレクタを指定してExt.CompositeElementを取得し、取得したExt.CompositeElementに含まれるElementに対してまとめてaddListener()でイベントをすることができます。

Ext.onReady(function(){
var myDivs=Ext.select('#foo a');
myDivs.addListner({
'click':function(){alert("Click!!"),this}),
'dblclick':function(){alert("Double Click!!"),this}),
'mouseover':function(){alert("MouseOver!!"),this}),
scope:this,
delay: 100
}
});

このほかに、Ext.addBehaviors()を利用しても同様にCSSセレクタを指定して複数の要素のまとめてイベントを登録することができます。
Ext.addBehaviors()はDomが構成された後に実行されるため、Ext.onReady()の中で記述しなくてもイベントの登録が行えます。

Ext.addBehaviors( Object obj ) : void

引数のオブジェクトは、{'CSSセレクタ@イベント名:functionオブジェクト}というように指定します。
イベントが複数ある場合は、プロパティを増やしていけばいいです。

また、'CSSセレクタ1,CSSセレクタ2・・,CSSセレクタN@イベント名'というようにCSSセレクタをカンマで区切ると複数のCSSセレクタの指定に対して同じ関数をイベント処理として登録することができます。

Ext.addBehaviors({
'#foo a@click' : function(e, t){alert("Click!!")},
'#foo a@dblclick' : function(e,t){alert("Double Click!!")},
'#foo a@mouseover' : function(e,t){alert("MouseOver!!")}
});

});

単に、イベントを登録したいだけなら、Ext.addBehavious()を使うと簡単に書けていいかもしれません。

ExtJSが適用するUIコンポーネントに対してイベント処理を登録する場合は、ここのコンポーネントに対してaddListener()やon()が用意されているので同じように設定することになります。
コンポーネントに対するイベントのイベント名は、APIドキュメントに書かれているのでそちらを参考にしてください。