
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);
}
});
```