做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();
}
}
}
效果图: