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