摘要：這個教程將指導(dǎo)你如何獲取數(shù)據(jù)到你的表單并將這些數(shù)據(jù)提交。
Author: Shea Frederick
Translater: pplboy
Published: May 22, 2007
Translater Date:May 30.2007
這個教程使用了在getting started tutorial教程中使用過的 雇員信息編輯表單。如果你仍然不熟悉如何創(chuàng)建一個表單，你可以首先看一下這個例子。我建議下載用于這個例子的一段程序，這樣可能對你有一些幫助。你也可以找一個有效的例子。
我們將經(jīng)歷使用表單的整個過程，從最初的從服務(wù)器獲取數(shù)據(jù)填入表單，到將數(shù)據(jù)返回給服務(wù)器。在后端我使用PHP和MySQL, 然而這個例子對于PHP和MySQL來說并不是特殊的，而是只要求你能夠從你的服務(wù)器讀取和輸出JSON數(shù)據(jù)。
讓我們開始吧
首先我們必須設(shè)置表單的url, 這是一個能獲得POST數(shù)據(jù)并將其寫進我們的數(shù)據(jù)庫的PHP腳本.
var form_employee = new Ext.form.Form({
...
url:'forms-submit-process.php',
...
});
我們的數(shù)據(jù)包含5個字段：id, name, title, hire_date和active,這些字段可以被取回并放置到一個數(shù)據(jù)存儲對象（Store）中。
以下的程序構(gòu)造了一個數(shù)據(jù)存儲對象，在這個時候沒有數(shù)據(jù)被取回，我們的數(shù)據(jù)代理（Proxy）對象提交到一個PHP腳本，用來取回數(shù)據(jù)庫id為14的行 并將它轉(zhuǎn)換成一個JSON字符串。
employee_data = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'forms-submit-getdata.php?id=14'}),
reader: new Ext.data.JsonReader({},[ 'id', 'name', 'title', 'hire_date', 'active']),
remoteSort: false
});
接下來要做的是設(shè)定我們的事件監(jiān)聽者來監(jiān)察什么時候數(shù)據(jù)被載入， 這個將保證我們不會在數(shù)據(jù)被載入之前填入表單。
employee_data.on('load', function() {
// data loaded, do something with it here...
});
當(dāng)數(shù)據(jù)被載入后，我們可以取回數(shù)據(jù)并用setValue方法將其填入表單。這里我們用getAt(0) 從我們的數(shù)據(jù)存儲對象里重新取回第一行數(shù)據(jù)（行zero）。
注意：這里使用的表單和表單字段在getting started tutorial中有定義和解釋。
employee_name.setValue(employee_data.getAt(0).data.name);
employee_title.setValue(employee_data.getAt(0).data.title);
employee_hire_date.setValue(employee_data.getAt(0).data.hire_date);
employee_active.setValue(Ext.util.Format.boolean(employee_data.getAt(0).data.active));
我們將要創(chuàng)建提交按鈕并添加到表單，記得給來源于表單字段的POST數(shù)據(jù)設(shè)定擴展參數(shù)。你將會發(fā)現(xiàn)通過行確定字段（id）對于讓php腳本找到需要更新的行非常有用，同時為了更好的判斷，還需要一個action判定。
我還使用isValid參數(shù)來保證表單在提交前符合每一個字段的要求。
form_employee.addButton('Save', function(){
if (form_employee.isValid()) {
form_employee.submit({
params:{
action:'submit',
id:employee_data.getAt(0).data.id
},
waitMsg:'Saving...'
});
}else{
Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
}
}, form_employee);
form_employee.render('employee-form');
讀取我們的數(shù)據(jù)
現(xiàn)在我們來讀取數(shù)據(jù)
employee_data.load();
這樣真的能夠驚人簡單的創(chuàng)建一個可用的表單，與成對的服務(wù)器段腳本接合，就能夠?qū)?shù)據(jù)從數(shù)據(jù)庫獲取并寫入修改后的數(shù)據(jù)。這些服務(wù)端腳本可以簡單到只需幾行而已。
接下來是什么？
通常來說，API文件和例子對于學(xué)習(xí)怎么樣將表單改造成你所需要的形式來說是很不錯的途徑。