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", // 用于访问的nameallowBlank:false, // 不允许为空fieldLabel:"用户名"//表单域的提示信息}),{name:"password",// xtype:"textfield", // 表单域的类型Ext.form.TextFieldinputType:"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 {@Overrideprotected 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();}}}

 

效果图：