EXTjs学习笔记（4）

    之前三篇谈到了组件的使用Ajax的使用等，尽管只是简单举例但已经是有了初步的认识，至少见了extjs这位大美女不会再觉得紧张了。 下面我们切入关键部分那就是如何使用Extjs与后台交互，并且是通过表单提交。 学习这部分后就能够做自己的简单系统了，Extjs的表单处理完全是自动化的并且是使用ajax提交的，并且实现起来时那么的优美。让我们开始体验吧

 

1. 创建表单

    FromPanel 是Panel面板的子类。

	var f = new Ext.FormPanel({
		url : 'MyServlet',//调用的servlet
		method : 'post',
		baseParams : {
			sex:"男"//默认传入servlet的参数
		},
		title : "Form",
		width : "400",
		height : "150",
		bodyStyle : "padding,6px",
		lableAlgin : "right",
		frame : true,
		items : [new Ext.form.TextField({
							name : "userName",
							allowBlank : false,
							fieldLabel : "用户名",
							lableAlgin : "left"
						}), new Ext.form.TextField({
							name : "password",
							fieldLabel : "密码",
							inputType : "password",
							allowBlank : false,
							lableAlgin : "left"
						})],
		buttons : [{
			text : "确定",
			handler : function() {
				Ext.MessageBox.alert("tt", "名字1是："
								+ f.getForm().findField("userName").getValue()
								+ "密码是："
								+ f.getForm().findField("password").getValue());
				f.getForm().submit({
							success : function(f,action) {
								Ext.MessageBox.alert("SUC", action.result.msg+action.result.time);
							},
							failure : function() {
								Ext.MessageBox.alert("ERROR", "提交失败");
							}
						});
			}
		}, {
			text : "重置",
			handler : function() {
				var feilds = f.getForm().items.items;
				for (var i = 0; i < feilds.length; i++) {
					feilds[i].reset();
				}
			}
		}]

	});
	f.render(Ext.getBody());

 

2. 创建servlet

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.setContentType("text/html;charset=utf-8");
		System.out.println("sex IS "+request.getParameter("sex"));
		System.out.println(request.getParameter("userName"));
		System.out.println(request.getParameter("password"));
		java.io.PrintWriter writer=response.getWriter();
		String ret="{success:true,msg: '访问成功', "+"time:'"+request.getParameter("userName")+"服务器时间"+new java.util.Date().toLocaleString()+"'}";
		System.out.println("ret Is"+ret);
//		writer.write("[{cid:1,cname:'西安'},{cid:2,cname:'咸阳'},{cid:3,cname:'渭南'}]");
		writer.write("{success:true,msg: '访问成功', "+"time: '"+request.getParameter("userName")+"服务器时间"+new java.util.Date().toLocaleString()+"'}");
		writer.flush();
		writer.close();
	}

 

 

3. HTML

  此文件依然什么都没有，除了必须的js和css

 

 

小结：

    ext 对form 的支持非常优美，集成了ajax的提交方式 能够创建出漂亮的几面，自动的空值校验等等。还有很多强大功能让我们进一步学习吧。