extJS 表单 Form的使用

１、表单

　　对于传统的b/s应用来说，数据录入元素是放在表单

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

  看下面的代码：

 

Ext.onReady(function(){
  var form=new Ext.form.FormPanel({
  renderTo:"hello",
  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:"取消"}]
  })
 });

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

２、BasicForm

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

Ext.onReady(function(){
  var f=new Ext.form.FormPanel({
  renderTo:"hello",
  title:"用户信息录入框",
  url:"person.ejf",
  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();
  }
  }]
  })
 });

３、Field,表单元素

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

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

４、表单动作Ext.form.Action

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

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

示例：常用输入框，提交数据，和从后台load数据(后台用jsp模拟)

//简单表单
function simpleForm(){
    var fpanel = new Ext.form.FormPanel({
        title:"用户基本信息",
        width:300,
        height:250,
        labelAlign: "right",
        labelWidth:80,
        //fileUpload:true,
        buttons:[
            {text:"提交", handler:function(){
                //对表单内容进行操作，需要用到BasicForm类中的方法
                //要得到一个BasiForm的实例，需要调用FormPanel对象上面的getForm方法
                fpanel.getForm().submit({url:"test.jsp",success:function(){
                    Ext.Msg.alert("提示","数据保存成功！");
                }});
            }},
            {text:"重置"},
            //从后台加载数据
            {text:"加载数据",handler:function(){
                fpanel.form.load({url:"getreg.jsp",params:{id:5}});
            }}
            ],

        items:[
            {xtype:"textfield",fieldLabel:"姓名",name:"name"},
            {xtype:"textfield",fieldLabel:"密码",inputType:"password",name:"password"},
            {xtype:"textfield",fieldLabel:"电子邮件",name:"email"},
            {xtype:"datefield",fieldLabel:"出生日期",name:"bornDate"},
            {xtype:"textarea",fieldLabel:"简介",name:"info", width:200}
        ]
    });
    fpanel.render("d1");
}

getreg.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

    <%
        String id = request.getParameter("id");
        if(id!=null && "5".equals(id)){
    %>
            {
                "success":true,
                "data":{"name":"kylin", password:123,email:"[e-mail]"}
            }
    <%
        }
        else{
            out.println("{success:false}");
        }
    %>