之前三篇谈到了组件的使用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的提交方式 能够创建出漂亮的几面,自动的空值校验等等。还有很多强大功能让我们进一步学习吧。
分享到:
相关推荐
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式,就是Ext.create(....),而且可以使用动态加载JS的方式来加快组件的渲染,我们再也不必一次加载已经...ExtJS4学习笔记(十)---ExtJS4图片验证码的实现
目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77
### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具,它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...
适合ExtJs开发人员extjs技术上手以及深入
EXTJS in Action 是一本专为学习EXTJS编写的书籍,但这里我们主要关注学习笔记中的关键知识点。 首先,EXTJS的目录结构非常重要,因为它包含了所有必要的资源和源码: 1. `adapter`:这部分包含了适配器,用于将...
ExtJs简明教程+Extjs学习笔记,来源网络,免费奉送,我讨厌需要资源分~
语言程序设计资料:ExtJs学习笔记-2积分.doc
exjts4 学习笔记源码,源码包含windws,hbox,vbox和Grid的应用,其中grid介绍比较多。下载解压后,部署后就可以使用,所有代码均在demo文件夹下。更多extjs4教程,请关注http://www.mhzg.net
ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)--...
在探讨《ExtJS学习心得笔记》这一主题时,我们不仅会深入理解ExtJS框架的核心概念与实践技巧,还会从新手的角度出发,提炼出一系列有助于快速上手的学习策略,避免常见的学习陷阱,确保学习过程高效而有成效。...
这个学习笔记涵盖了从基础到高级的多个主题,帮助读者深入理解ExtJs的核心概念和技术。以下是一些关键知识点的详细说明: 1. **ExtJs 结构树**:这部分内容可能涉及ExtJs如何构建可自定义的用户界面组件树,包括...
Extjs4.0学习笔记大全.pdf,供大家学习