Storeにイベントリスナーを設定すると、読み込まれる度に何度も何度も呼ばれてしまうことがあります。また、呼ばれる回数が読み込む毎に増えて行ってしまう場合もあります。要はコーディングが悪いと言うことなのですが、初心者である自分の反省も兼ねてメモ。
ダメな例
var store = Ext.getStore('sampleStore');
store.on({
load : {
fn : {
console.log('load event fired.');
}
}
});これを含む処理を行わせると実行結果がこんな感じになっていきます。
ダメな例の実行結果
1回目
load event fired.2回目
load event fired.
load event fired.3回目
load event fired.
load event fired.
load event fired.4回目
load event fired.
load event fired.
load event fired.
load event fired.僕のしていた誤解
- 1つのイベントハンドラに設定できる処理は1つで重複した場合は上書きされる
現実
- 1つのイベントハンドラにはいくつでも処理を設定できるし、「on」または「addListener」する度に処理が複数追加されていく
修正方法
その1. storeを読み込んだときに1回だけイベントハンドラを設定するようにする
つまりstoreクラスである「sampleStore」にloadイベントを追加して、実行クラスの方では追加しないようにするということです。これはこれで効果があるのですが、規模が大きくなって1つのstoreクラスを使い回すようになると使いづらくなります。その2. store外からイベントを追加するときには「single: true」オプションを付加する
こんな感じ。var store = Ext.getStore('sampleStore');
store.on({
load : {
fn : {
console.log('load event fired.');
},
single : true
}
});「single: true」オプションが付加されたイベントは、1回実行すると自動的に破棄されます。この処理クラスでしか使わないような処理をstoreのイベントとして追加したい場合、使用したら捨てるという設定にすることで、
何度も何度も重複して追加してしまうことがない
他の処理が影響を受けない
ということが保証されます。
その代わり、使用する前には必ず追加しなければならないので、毎回必ず行う様な処理（例えばリクエストを送るときに必ず指定されたトークンを付加するなど）には向かないと思います。たぶん。