学习EXT第九日（B):为一个表单填充或提交数据

摘要：这个教程将指导你如何获取数据到你的表单并将这些数据提交。
Author: Shea Frederick
Translater: pplboy
Published: May 22, 2007
Translater Date:May 30.2007
这个教程使用了在getting started tutorial教程中使用过的 雇员信息编辑表单。如果你仍然不熟悉如何创建一个表单，你可以首先看一下这个例子。我建议下载用于这个例子的一段程序，这样可能对你有一些帮助。你也可以找一个有效的例子。

我们将经历使用表单的整个过程，从最初的从服务器获取数据填入表单，到将数据返回给服务器。在后端我使用PHP和MySQL, 然而这个例子对于PHP和MySQL来说并不是特殊的，而是只要求你能够从你的服务器读取和输出JSON数据。

让我们开始吧

首先我们必须设置表单的url, 这是一个能获得POST数据并将其写进我们的数据库的PHP脚本.

var form_employee = new Ext.form.Form({
...
url:'forms-submit-process.php',
...
});

我们的数据包含5个字段：id, name, title, hire_date和active,这些字段可以被取回并放置到一个数据存储对象（Store）中。

以下的程序构造了一个数据存储对象，在这个时候没有数据被取回，我们的数据代理（Proxy）对象提交到一个PHP脚本，用来取回数据库id为14的行 并将它转换成一个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
});

接下来要做的是设定我们的事件监听者来监察什么时候数据被载入， 这个将保证我们不会在数据被载入之前填入表单。

employee_data.on('load', function() {

// data loaded, do something with it here...

});

当数据被载入后，我们可以取回数据并用setValue方法将其填入表单。这里我们用getAt(0) 从我们的数据存储对象里重新取回第一行数据（行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));

我们将要创建提交按钮并添加到表单，记得给来源于表单字段的POST数据设定扩展参数。你将会发现通过行确定字段（id）对于让php脚本找到需要更新的行非常有用，同时为了更好的判断，还需要一个action判定。

我还使用isValid参数来保证表单在提交前符合每一个字段的要求。

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');

读取我们的数据

现在我们来读取数据

employee_data.load();

这样真的能够惊人简单的创建一个可用的表单，与成对的服务器段脚本接合，就能够将数据从数据库获取并写入修改后的数据。这些服务端脚本可以简单到只需几行而已。

接下来是什么？

通常来说，API文件和例子对于学习怎么样将表单改造成你所需要的形式来说是很不错的途径。

API文档
社区论坛
http://www.ajaxjs.com/article.asp?id=20075842