Extjs学习总结之15表单面板formpanel

做web应用，表单是经常要看到吧，表单如何绘制，表单的数据如何提交的这些问题，我们看extjs如何解决？

我们创建一个典型的用户注册的表单，然后创建servlet，与前台做一下简单的数据交互。



form.js:

Ext.onReady(function(){
	var f = new Ext.form.FormPanel({
		//数据传送提交到服务器
		url:"../../../loginFormServlet",
		method:"post",
		baseParams:{extra:"attach",id:100},
		title:"欢迎登录",//表单面板的标题
		width:300, //面板宽度
		height:130,//面板高度
		bodyStyle:"padding:6px", // 正文区域的样式
		labelAlign:"right", // 统一的提示信息对其方式 右对齐
		frame:true, // 效果
		items:[
			new Ext.form.TextField({
				name:"userName", // 用于访问的name
				allowBlank:false, // 不允许为空
				fieldLabel:"用户名"//表单域的提示信息
			}),{
				name:"password",// 
				xtype:"textfield", // 表单域的类型Ext.form.TextField
				inputType:"password", //输入框的类型文本框密码框文本域
				fieldLabel:"密码", //提示信息
				allowBlank:false //不允许为空
			}
		],
		buttons:[{
			text:"确定",
			handler:function(){
				//得到name为userName的表单域控件的值
				var userName = f.getForm().findField("userName").getValue();
				//得到name为password的表单域控件的值
				var password = f.getForm().findField("password").getValue();
				Ext.Msg.alert("提示","用户名："+userName+"<br>密码："+password);
			
				//提交表单
				f.getForm().submit({
					//响应是Json格式的字符串
					success:function(f,action){
						Ext.Msg.alert("成功","服务器结果："+action.result.msg+"时间："+action.result.time);
					},
					failure:function(){
						Ext.Msg.alert("失败","对不起，表单提交失败");
					}
				});
			}
		},{
			text:"重置",
			handler:function(){
				f.getForm().reset();//重置表单面板中所有属性的值
			}
			//同下
//			handler:function(){
//				var fields = f.getForm().items.items;
//				for(var i=0;i<fields.length;i++){
//					fields[i].reset();
//				}
//			}
			
		}]
	});	
	
	f.render("a");
});

servlet:

package com.fenet.web.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("serial")
public class LoginFormServlet extends HttpServlet {
	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		try {
			request.setCharacterEncoding("utf-8");
			response.setCharacterEncoding("utf-8");
			
			String userName = request.getParameter("userName");
			String password = request.getParameter("password");
			PrintWriter out = response.getWriter();
			out.print("{success:true,msg:'服务器结果，成功!',time:'今天'}");
			out.flush();
			out.close();
			
			System.out.println("注册帐号是："+userName+"  密码："+password);
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		
	}
}

效果图：