 ExtJS 的 Form 很方便,有時我們需要從伺服器上載入 JSON 內容,然後把 JSON 的內容放回入 Form 內供使用者修改,然後再儲存回到伺服器上。 ### 伺服器 AJAX 回傳的 JSON 假設呼叫伺服器一個 `users.php` 會回傳以下的 JSON 資料: ```json { "success":true, "user":{ "name":"19site", "age":20 } } ``` ### Ext.form.Panel 元件 另外有一個 `Ext.form.Panel` 元件 : ```json { xtype: 'form', layout: { type: 'vbox' }, items:[{ name: 'name', fieldLabel: '名稱' }, { name: 'age', fieldLabel: '年齡' }] } ``` ### 實作方法 我們使用 `Ext.Ajax.request` 呼叫 `users.php` 後,可以使用以下方法把 JSON 直接載入到 `Ext.form.Panel` 內 : ```js form.getForm.setValues(data.data); ``` 我們是可以使用 `form.getForm.setValues(data)` 來把 JSON 直接定到到 Form Panel 內,JSON 的 KEY 會對應 Form Panel 內 Text Field 的 name 來配對,設定相應的 value。 ```js var form = view.down('selector of form'); Ext.Ajax.request({ url: 'users.php', success: function(res) { var data = JSON.parse(res.responseText); form.getForm.setValues(data.data); } }); ```