2011年2月27日日曜日

ハンドラの関数に引数を追加したいとき (ExtJS)

コンポーネントにイベントハンドラを設定するとき、追加の引数を渡したいときがあります。
たとえばコンボボックスのselectイベントの場合

// 関数定義
function doSomething(combo, record, index){
    // 何か処理
}

// イベントハンドラ設定部分
Ext.getCmp('comboID').on('select', doSomething);

そのままだと、引数として以下が渡されます。

combo: Ext.form.ComboBox
コンボボックス
record: Ext.data.Record
ストアから返されたデータレコード
index: Number
ドロップダウンリスト内の選択された項目のインデックス

ハンドラに引数を追加したいとき、関数定義を次のようにしても、そりゃーダメです。

// 間違った関数定義
function doSomething(combo, record, index, addParam){
    // 何か処理
}

こういうときはFunctionクラスのcreateCallback、またはcreateDelegateを使います。

上の例だと次のように書けます。

/**
* createDelegateを使う
*/
// 関数定義部分
function doSomething(addParam){
    var value = this.getValue();
    // 何か処理
}

// ハンドラ設定部分
var cmb = Ext.getCmp('comboID');
cmb.on('select', doSomething.createDelegate(cmb, [addParam]));

createCallbackとcreateDelegateの違いは、スコープを渡せるかどうかです。

引数の形式
createCallback(/*args...*/):Function
createDelegate([Object obj], [Array args], [Boolean/Number appendArgs]):Function

ExtJSのAPIリファレンスにはbuttonの例が載っています。
ExtJS 3.0 API Documentation 日本語版
http://extdocs.xenophy.com/

0 件のコメント:

コメントを投稿