extJS 表单 Form的使用

  extJS 表单 Form的使用  2011-08-31 15:09:11

分类： 系统运维

１、表单

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

  看下面的代码：

  

1. Ext.onReady(function(){
   
2.   var form=new Ext.form.FormPanel({
   
3.   renderTo:"hello",
   
4.   title:"用户信息录入框",
   
5.   height:200,
   
6.   width:300,
   
7.   labelWidth:60,
   
8.   labelAlign:"right",
   
9.   frame:true,
   
10.   defaults:{xtype:"textfield",width:180},
    
11.   items:[
    
12.     {name:"username",fieldLabel:"姓名"},
    
13.     {name:"password",fieldLabel:"密码",inputType:"password"},
    
14.     {name:"email",fieldLabel:"电子邮件"},
    
15.     {xtype:"textarea",name:"intro",fieldLabel:"简介"}
    
16.   ],
    
17.   buttons:[{text:"提交"},{text:"取消"}] 
    
18.   })
    
19.  });

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

２、BasicForm

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

1. Ext.onReady(function(){
   
2.   var f=new Ext.form.FormPanel({
   
3.   renderTo:"hello",
   
4.   title:"用户信息录入框",
   
5.   url:"person.ejf",
   
6.   height:200,
   
7.   width:300,
   
8.   labelWidth:60,
   
9.   labelAlign:"right",
   
10.   frame:true,
    
11.   defaults:{xtype:"textfield",width:180},
    
12.   items:[
    
13.     {name:"username",fieldLabel:"姓名"},
    
14.     {name:"password",fieldLabel:"密码",inputType:"password"},
    
15.     {name:"email",fieldLabel:"电子邮件"},
    
16.     {xtype:"textarea",name:"intro",fieldLabel:"简介"}
    
17.   ],
    
18.   buttons:[{text:"提交",
    
19.   handler:function(){ 
    
20.   f.form.submit({
    
21.   waitTitle:"请稍候",
    
22.   waitMsg:"正在提交表单数据，请稍候。。。。。。"
    
23.   });
    
24.   }},{text:"重置",
    
25.   handler:function(){ 
    
26.   f.form.reset();
    
27.   }
    
28.   }]
    
29.   })
    
30.  });

３、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模拟)

1. //简单表单
   
2. function simpleForm(){
   
3.     var fpanel = new Ext.form.FormPanel({
   
4.         title:"用户基本信息",
   
5.         width:300,
   
6.         height:250,
   
7.         labelAlign: "right",
   
8.         labelWidth:80,
   
9.         //fileUpload:true,
   
10.         buttons:[
    
11.             {text:"提交", handler:function(){
    
12.                 //对表单内容进行操作，需要用到BasicForm类中的方法
    
13.                 //要得到一个BasiForm的实例，需要调用FormPanel对象上面的getForm方法
    
14.                 fpanel.getForm().submit({url:"test.jsp",success:function(){
    
15.                     Ext.Msg.alert("提示","数据保存成功！");
    
16.                 }});
    
17.             }},
    
18.             {text:"重置"},
    
19.             //从后台加载数据
    
20.             {text:"加载数据",handler:function(){
    
21.                 fpanel.form.load({url:"getreg.jsp",params:{id:5}});
    
22.             }}
    
23.             ],
    
24.             
    
25.         items:[
    
26.             {xtype:"textfield",fieldLabel:"姓名",name:"name"},
    
27.             {xtype:"textfield",fieldLabel:"密码",inputType:"password",name:"password"},
    
28.             {xtype:"textfield",fieldLabel:"电子邮件",name:"email"},
    
29.             {xtype:"datefield",fieldLabel:"出生日期",name:"bornDate"},
    
30.             {xtype:"textarea",fieldLabel:"简介",name:"info", width:200}
    
31.         ]
    
32.     });
    
33.     fpanel.render("d1");
    
34. }

getreg.jsp:

1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
   
2. 
   
3.     <%
   
4.         String id = request.getParameter("id");
   
5.         if(id!=null && "5".equals(id)){
   
6.     %>        
   
7.             {
   
8.              "success":true, 
   
9.              "data":{"name":"kylin", password:123,email:"adsf@lenovo.com"}
   
10.             }
    
11.     <%
    
12.         }
    
13.         else{
    
14.             out.println("{success:false}");
    
15.         }
    
16.     %>