3月 31, 2020 Sencha
![](https://cdn.19site.net/files/45/72/4572a5d1-f2c6-40f7-b17c-262383ee1971.png '找不到沒有 License 的 Sencha Logo,只好自己動手用小畫家畫一個')

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);
	}
});
```
過去文章
2025 (9)
4 (5)
3 (1)
2 (3)
2024 (25)
11 (3)
10 (3)
9 (1)
3 (18)
2022 (6)
10 (1)
6 (2)
5 (1)
3 (1)
1 (1)
2021 (21)
11 (7)
7 (1)
6 (2)
5 (2)
4 (6)
3 (2)
2 (1)
2020 (92)
12 (1)
11 (2)
10 (4)
9 (10)
8 (5)
7 (1)
6 (3)
5 (1)
4 (4)
3 (25)
2 (7)
1 (29)
2019 (57)
12 (25)
11 (7)
9 (25)