ExtJS 4には、2つのリスナーが割り当てられたコンボボックスがあります。1つはアフターレンダリングで、デフォルト値を選択します。(コンボボックスには月が一覧表示されます。デフォルトのグリッドには現在の月のデータがあります。コンボボックスに今月を表示します。)もう1つは選択されており、選択した月に基づいてレポートを取得します。レポートはプリロードされるので、コンボボックスの事前入力時にアクティブにしたくありません。コンボボックスのその後の使用(つまり、人間との対話)でのみアクティブになります。
これが私がリスナーを設定する方法です:
init: function init() {
this.control({
'[xtype=monthcombo]': {
afterrender: this.onMonthComboAfterRenderDo,
select: this.onMonthComboSelectDo
}
})
}
そして、これはプリポップアフターレンダー関数です:
onMonthComboAfterRenderDo: function(monthcombobox) {
monthcombobox.suspendEvents(false); // Don't fire the select event
var date = new Date(),
thisMonth = Ext.Date.add(date, Ext.Date.MONTH,0);
thisMonth = Ext.Date.format(thisMonth,'Ym');
monthcombobox.calculateMonths(23,0);
monthcombobox.setValue(thisMonth);
monthcombobox.resumeEvents();
}
ああ、あなたが見ることができるように私はイベントの発生を抑制しようとしました、しかしそれらの呼び出しは実際には何もしないようです。最後に、これはアイテムが選択されたときに呼び出される関数です。
onMonthComboSelectDo: function(monthcombobox) {
console.debug('Month selected');
var monthcode = monthcombobox.getValue();
var grid = Ext.ComponentQuery.query('shipmentsvsgrid')[0];
grid.store.getProxy().setExtraParam('monthID', monthcode);
grid.store.load();
}