ExtJS Form 表單綁定 Store 資料：使用 loadRecord 方法

ExtJS 中 xtype: 'textfield' 等表單欄位綁定 Store 資料，或直接將後端 JSON 資料填入表單，最簡單的方式是呼叫 form.loadRecord(record)。

完整範例

// 1. 定義 Model（欄位名與表單 field name 對應）
Ext.define('UserModel', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name', 'email', 'phone']
});

// 2. 建立 Record 實例（可來自 Store.getAt(0) 或手動建立）
var record = Ext.create('UserModel', {
    id: 1,
    name: '張三',
    email: 'zhangsan@example.com',
    phone: '13800000000'
});

// 3. 取得 Form Panel 並載入
var form = Ext.getCmp('myFormId').getForm(); // 或 this.up('form').getForm()
form.loadRecord(record);

關鍵點

• Model fields 必須與表單項目 name 一致，否則無法自動對應。
• loadRecord 會自動處理 textfield、combobox、datefield 等各類元件的值設定。
• 若資料來自 Store，直接 store.getAt(index) 取得 Model 實例傳入即可。
• 提交時用 form.getValues() 取得純物件，或 form.updateRecord(record) 回寫 Model 再 record.save()。

參考官方文件：Ext.form.Panel.loadRecord