教程:开始表单之旅

我建议下载用于这个例子的一段程序，这样可能对你有一些帮助。你也可以找一个有效的例子。

表单
首先要做的第一件事就是创建一个表单，这相当于在HTML中书写一个

标识。

var form_employee = new Ext.form.Form({
        labelAlign: 'right',
        labelWidth: 175,
        buttonAlign: 'right'
}); 

创建表单字段
表单示例由name、title、hire_date和active四个表单字段构成。开头的两个表单字段name和title，只是简单的文本字段，我们会用TextField方法来创建它们。

重要的配置选项是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方法来创建，它会为我们弹出一个别致的日期选择器来让我们选择日期。

format配置选项被用来为PHP指定日期格式标准（PHP的日期格式）。日期格式字符串的调整须与你所用的日期格式相匹配。

var employee_hire_date = new Ext.form.DateField({
        fieldLabel: 'Hire Date',
        name: 'hire_date',
        width:90,
        allowBlank:false,
        format:'m-d-Y'
});

最后一个表单元素active是一个布尔值，我们使用Checkbox方法来创建。

var employee_active = new Ext.form.Checkbox({
        fieldLabel: 'Active',
        name: 'active'
}); 

完成表单
现在，我们把表单里的所有表单字段加入到fieldset中去。当然了，如果你想在fieldset的外面进行，可以选择使用add方法。

form_employee.fieldset(
        {legend:'Employee Edit'},
        employee_name,
        employee_title,
        employee_hire_date,
        employee_active
)

最后，最不能少的就是submit按钮，它与一小段点击时进行错误检测的代码块一起被addButton方法加进来。调用render方法，传入div标识的“id”，然后在网页的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');

下一步
虽然本教程让你懂得了如何去创建一个表单，但创建出来的表单什么事情也干不了。就像一部没有引擎的小汽车——它看起来可能很漂亮，但不能让你走得更远。

Author: Shea Frederick（译者：pplboy）
Recived from "http://extjs.com/learn/Tutorial:Getting_Started_with_Forms_%28Chinese%29":