ExtJS RowEditing 編輯模式下 ComboBox 與 DateField 數值綁定顯示問題解決方案

在 ExtJS Grid 使用 RowEditing 插件時，ComboBox 欄位編輯狀態下顯示原始值（如物件 {id:1, name:'A'}）而非顯示文字，DateField 同樣顯示時間戳（如 Date(1438272000000)）而非格式化日期，是因為 valueField/displayField 映射或 renderer 設定不當。

ComboBox 正確設定

{
    xtype: 'combobox',
    store: organizerStore, // 包含 id, name 欄位
    valueField: 'id',      // 實際儲存值
    displayField: 'name',  // 顯示文字
    queryMode: 'local',
    editable: false,
    // 關鍵：確保 Grid Column 有 renderer 顯示文字而非 id
    // 若 Store 已載入完整資料，RowEditing 會自動匹配 valueField 顯示 displayField
}

Grid Column 設定

columns: [{
    text: '舉辦方',
    dataIndex: 'organizerId', // 對應 Model 的 organizerId 欄位
    editor: { xtype: 'combobox', ... }, // 上述 ComboBox 設定
    renderer: function(value) {
        // 顯示時將 id 轉為 name
        var record = organizerStore.findRecord('id', value);
        return record ? record.get('name') : value;
    }
}]

DateField 處理

{
    xtype: 'datefield',
    format: 'Y-m-d',
    submitFormat: 'Y-m-d', // 提交格式
    // Model 定義欄位類型
    // fields: [{ name: 'eventDate', type: 'date', dateFormat: 'timestamp' }]
}

關鍵檢查清單

1. Model 欄位 type: 'date' 且 dateFormat 正確（如 'timestamp', 'Y-m-d'）。
2. Store 資料載入完成後才建立 Grid/Editor，確保 ComboBox Store 有資料可匹配。
3. 若使用 rowEditing.startEdit(record, column) 手動開啟編輯，確認 record.data 包含正確的原始值。

參考討論

CSDN 相關討論：ExtJS RowEditing ComboBox 賦值問題