摘要: 本教程教你如何入手去創(chuàng)建一個基本的表單。
Author: Shea Frederick
Translater:Hegz
Published: May 05, 2007
Translated:May 14,2007
出處:http://www.fleaphp.org.cn/bbs/viewthread.php?tid=906&page=1&extra=page%3D1#pid4736
我建議下載用于這個例子的一段程序,這樣可能對你有一些幫助。你也可以找一個有效的例子。
表單體
首先要做的第一件事就是創(chuàng)建一個表單體,這相當于在HTML中書寫一個
標識。
var form_employee = new Ext.form.Form({
labelAlign: 'right',
labelWidth: 175,
buttonAlign: 'right'
});
創(chuàng)建表單字段
表單示例由name、title、hire_date和active四個表單字段構(gòu)成。開頭的兩個表單字段name和title,只是簡單的文本字段,我們會用TextField方法來創(chuàng)建它們。
重要的配置選項是name,定義該選項與HTML中定義一個表單字段名幾乎一樣。
var employee_name = new Ext.form.TextField({
fieldLabel: 'Name',
name: 'name',
width:190
});
var employee_title = new Ext.form.TextField({
fieldLabel: 'Title',
name: 'title',
width:190
});
跟著的hire_date字段是一個日期字段,我們會用DateField方法來創(chuàng)建,它會為我們彈出一個別致的日期選擇器來讓我們選擇日期。
format配置選項被用來為PHP指定日期格式標準(PHP的日期格式)。日期格式字符串的調(diào)整須與你所用的日期格式相匹配。
var employee_hire_date = new Ext.form.DateField({
fieldLabel: 'Hire Date',
name: 'hire_date',
width:90,
allowBlank:false,
format:'m-d-Y'
});
最后一個表單元素active是一個布爾值,我們使用Checkbox方法來創(chuàng)建。
var employee_active = new Ext.form.Checkbox({
fieldLabel: 'Active',
name: 'active'
});
完成表單
現(xiàn)在,我們把表單里的所有表單字段加入到fieldset中去。當然了,如果你想在fieldset的外面進行,可以選擇使用add方法。
form_employee.fieldset(
{legend:'Employee Edit'},
employee_name,
employee_title,
employee_hire_date,
employee_active
)
最后,最不能少的就是submit按鈕,它與一小段的錯誤檢測代碼塊一起被addButton方法加進來。當該按鈕被點擊,就會調(diào)用render方法,傳入div標識的“id”,然后在網(wǎng)頁的div里把表單顯示出來。
form_employee.addButton('Save', function(){
if (form_employee.isValid()) {
Ext.MessageBox.alert('Success', 'You have filled out the form correctly.');
}else{
Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
}
}, form_employee);
form_employee.render('employee-form');
下一步
雖然本教程讓你懂得了如何去創(chuàng)建一個表單,但創(chuàng)建出來的表單什么事情也干不了。就像一部沒有引擎的小汽車——它看起來可能很漂亮,但不能讓你走得更遠。