Ext JS DateField 月份選擇器點擊事件處理指南

問題背景

Ext JS 的 datefield 控件默認提供下拉日期面板，點擊月份/年份標題可切換到月份選擇器（MonthPicker）。但 datefield 本身無直接事件監聽用戶在 MonthPicker 中點擊具體月份，導致無法在選擇「年月」後立即執行業務邏輯（如刷新列表、設置篩選條件）。

解決方案：獲取 MonthPicker 並綁定 monthclick 事件

1. 在 datefield 的 expand 事件或渲染後，獲取其內部的 picker (Ext.picker.Date)。
2. 從 picker 獲取 monthPicker (Ext.picker.Month)。
3. 在 monthPicker 上監聽 monthclick 事件。

代碼實現

listeners: {
    // 方案一：展開時綁定 (推薦，確保 picker 已創建)
    expand: function(field) {
        var picker = field.getPicker();
        if (picker && picker.monthPicker) {
            picker.monthPicker.on('monthclick', function(mp, date) {
                // date 為用戶點選的月份首日 (Date 對象)
                console.log('用戶選擇了年月:', Ext.Date.format(date, 'Y-m'));
                // 業務邏輯：如設置字段值、觸發查詢
                field.setValue(date); // 可選：設置 datefield 值為該月第一天
                field.collapse();     // 關閉下拉面板
            }, null, { single: true }); // single: true 防止重複綁定
        }
    }
}

關鍵 API 參考

• Ext.picker.Month event: monthclick — 官方文檔，參數：(picker, date)。
• 社區實戰文章 — 詳細演示獲取 monthPicker 並處理點擊的完整流程。

圖片參考

datefield 基本外觀：

點擊圖標後的日期面板：

點擊「2015年08月」顯示月份選擇器：

用戶原始代碼片段

items: [{
    fieldLabel: '起始日期',
    xtype: 'datefield',
    format: 'Ymd',
    name: 'minIntTxnDt3',
    id: 'minIntTxnDt3',
    width: 180,
    labelWidth: 60,
    labelAlign: 'right',
    listeners: {
        select: function() {
            var start = Ext.getCmp('minIntTxnDt3').getValue();
            Ext.getCmp('maxIntTxnDt3').setMinValue(start);
            var endDate = Ext.getCmp('maxIntTxnDt3').getValue();
            if (start > endDate) {
                Ext.getCmp('maxIntTxnDt3').setValue(start);
            }
        }
    }
}]

最佳實踐提示

• 使用 {single: true} 確保事件處理器僅執行一次，避免多次展開導致重複綁定。
• 在 monthclick 中調用 field.collapse() 可關閉面板，提升用戶體驗。
• 若需「年份選擇器」點擊事件，同理監聽 yearPicker 的 yearclick 事件（Ext 6+ 支援）。
• 注意時區：date 參數為 UTC 午夜，格式化顯示時建議用 Ext.Date.format(date, 'Y-m')。