表单Ext.form.FormPanel

1、表单

对于传统的b/s应用来说，数据录入元素是放在表单<form>标签里面的。而对于ExtJS应用来说，则可以直接使用FormPanel控件来存放表单中的元素。FormPanel继承自Panel，在Panel的基础上提供与表单相关的各种特性，比如可以指定表单提交的url、指定表单提交方式、是否是二进制提交等；另外FormPanel固定使用form布局，前面关于布局一节中的内容我们说过，form布局也就是专门用于组织包含输入元素的布局。

看下面的代码：

  
    

   
      
   
     <
   
     script type
   
     =
   
     "
   
     text/javascript
   
     "
   
     >
   
     
 Ext.onReady(
   
     function
   
     (){
 
   
     new
   
      Ext.form.FormPanel({
 renderTo: Ext.getBody(),
 title:
   
     "
   
     用户信息录入
   
     "
   
     ,
 height: 
   
     200
   
     ,
 width: 
   
     300
   
     ,
 labelWidth: 
   
     60
   
     ,
 labelAlign: 
   
     "
   
     right
   
     "
   
     ,
 frame: 
   
     true
   
     ,
 defaults:{
 xtype:
   
     "
   
     textfield
   
     "
   
     ,
 width:
   
     180
   
     
 },
 items: [
 {name: 
   
     "
   
     username
   
     "
   
     , fieldLabel: 
   
     "
   
     姓名
   
     "
   
     },
 {name: 
   
     "
   
     password
   
     "
   
     , fieldLabel: 
   
     "
   
     密码
   
     "
   
     , inputType: 
   
     "
   
     password
   
     "
   
     },
 {name: 
   
     "
   
     email
   
     "
   
     , fieldLabel: 
   
     "
   
     电子邮件
   
     "
   
     },
 {xtype: 
   
     "
   
     textarea
   
     "
   
     , name: 
   
     "
   
     intro
   
     "
   
     , fieldLabel: 
   
     "
   
     简介
   
     "
   
     }
 ],
 buttons:[{text:
   
     "
   
     提交
   
     "
   
     }, {text:
   
     "
   
     取消
   
     "
   
     }]
 });
 });
 
   
     <
   
     /
   
     script>
  
    

运行效果如下：

在上面的代码中，使用new Ext.form.FormPanel来创建表单面板，通过labelWidth来指定表单中字段标签的宽度，labelAlign来指定字段标签的对齐方式，在defaults中指定该容器中所有子元素默认类型都是textfield，也就是录入文本框。在items定义的子元素中，一共包含三个textfield元素以及一个textarea元素，这些元素都包含一个name属性，相当于传统<input>标签中的name属性，fieldLabel属性用来指定字段标签。

2、BasicForm

表单面板FormPanel包含一个form属性，该属性是一个Ext.form.BasicForm 类型的对象，可以直接访问，也可以通过getForm()方法得到。BasicForm 表示基本的表单，包含了submit、load、reset等方法，用来取代传统表单<form>中的submit、reset等方法，通过调用这些方法可以实现提交表单、表单信息重置等操作。下面的代码实现了表单的提交操作：

  
    

   
      
   
     <
   
     script type
   
     =
   
     "
   
     text/javascript
   
     "
   
     >
   
     
 Ext.onReady(
   
     function
   
     (){
 
   
     var
   
      f
   
     =
   
     new
   
      Ext.form.FormPanel({
 renderTo: Ext.getBody(),
 title:
   
     "
   
     用户信息录入
   
     "
   
     ,
 height: 
   
     200
   
     ,
 width: 
   
     300
   
     ,
 labelWidth: 
   
     60
   
     ,
 labelAlign: 
   
     "
   
     right
   
     "
   
     ,
 frame: 
   
     true
   
     ,
 defaults:{
 xtype:
   
     "
   
     textfield
   
     "
   
     ,
 width:
   
     180
   
     
 },
 items: [
 {name: 
   
     "
   
     username
   
     "
   
     , fieldLabel: 
   
     "
   
     姓名
   
     "
   
     },
 {name: 
   
     "
   
     password
   
     "
   
     , fieldLabel: 
   
     "
   
     密码
   
     "
   
     , inputType: 
   
     "
   
     password
   
     "
   
     },
 {name: 
   
     "
   
     email
   
     "
   
     , fieldLabel: 
   
     "
   
     电子邮件
   
     "
   
     },
 {xtype: 
   
     "
   
     textarea
   
     "
   
     , name: 
   
     "
   
     intro
   
     "
   
     , fieldLabel: 
   
     "
   
     简介
   
     "
   
     }
 ],
 buttons:[{
 text:
   
     "
   
     提交
   
     "
   
     ,
 handler: 
   
     function
   
     (){
 f.form.submit({
 waitTitle:
   
     "
   
     请稍候
   
     "
   
     ,
 waitMsg:
   
     "
   
     正在提交表单数据，请稍候
   
     "
   
     
 });
 }
 }, {
 text:
   
     "
   
     重置
   
     "
   
     ,
 handler: 
   
     function
   
     (){
 f.form.reset();
 }
 }]
 });
 });
 
   
     <
   
     /
   
     script>
  
    

运行结果如下：

3、Field,表单元素

      Field代表各种各样的数据录入项；在程序中，我们一般直接使用Field的子类，包括Checkbox, CheckboxGroup, CompositeField, DisplayField, Hidden, HtmlEditor, SliderField, TextField等。

Field组件一般包括一个fieldLabel属性及name属性。fieldLabel是在Component中定义的，用来定义字段的元素。

4、表单动作Ext.form.Action

　　表单动作包括表单内容提交Submit，表单数据加载Load两种。默认情况下都是通过Ajax的方式向服务器端发送数据，提交表单数据或加载表单中的内容。

　　关于表单动作Action，我们将在后面的课程中讲解。