ExtJS 時間元件取值並精確顯示至分鐘的實作指南

在 ExtJS 應用開發中，時間選擇元件預設可能包含秒數，若業務需求僅需精確到分鐘，需自訂元件行為。以下提供兩種常見解決方案：

方案一：繼承並覆寫 getValue 方法

建立自訂類別繼承 Ext.form.field.Time，覆寫 getValue 方法，回傳前將秒數歸零或格式化為「HH:mm」字串。

Ext.define('MyApp.field.MinuteTime', {
    extend: 'Ext.form.field.Time',
    alias: 'widget.minutetime',
    getValue: function() {
        var val = this.callParent();
        if (val instanceof Date) {
            val.setSeconds(0, 0);
        }
        return val;
    }
});

方案二：格式化輸出配合表單提交

若不想改動元件核心，可在表單提交或資料取得時，使用 Ext.Date.format(value, 'H:i') 統一格式化，確保儲存與顯示一致性。

實務建議

• 設定 increment: 1 讓下拉清單以 1 分鐘為間距，提升使用者體驗。
• 搭配 format: 'H:i' 統一顯示格式，避免秒數干擾。
• 參考社群實作：ExtJS 時間元件自訂回傳值