日期:2014-05-16  浏览次数:20449 次

ExtJs--FormPanel简单与后台交互

先看页面中的写法:

??? ?var frm;
??Ext.onReady(function(){
???var form1 = new Ext.FormPanel({
????frame : true,
????width : 300,
????id : "frm",
????layout : "form",
????title : "添加个人信息",
????labelWidth : 70,
????labelAlign : "left",
????renderTo : "form1",
????items : [{
?????xtype : "textfield",
?????fieldLabel : "用户名",
?????name : "username",
?????allowBlank : false,
?????blankText : "不能为空!请正确填写!",
?????anchor : "90%"
????},{
?????xtype : "textfield",
?????fieldLabel : "昵称",
?????name : "smallname",
?????anchor : "90%"
????},{
?????xtype : "datefield",
?????fieldLabel : "注册日期",
?????name : "regdate",
?????anchor : "90%"
????}],
????buttons : [{
?????text : "提交", handler : submit
????},{
?????text : "加载", handler : load
????},{
?????text : "取消", handler : reset
????}]
???})
???frm = Ext.getCmp("frm");

?? //这两句话的意思是:校验
???Ext.QuickTips.init();??
???Ext.form.Field.prototype.msgTarget = 'side';
??})

?

?/**submit**/
??function submit() {
???if (!frm.getForm().isValid())return;
???frm.getForm().submit({
????waitMsg : "正在提交数据……",
????waitTitle : "提示",
????url : "http://localhost:8080/ExtJsApp/formServlet",
????method : "post",
????success : function(form, action) {
?????Ext.Msg.alert("提示","保存成功!");
????},
????failure : function(formm, action) {
?????Ext.Msg.alert("提示","保存失败:" + action.result.errors.info);
????}
???});
??}
??/**load**/
??function load() {
???frm.getForm().load({
????waitMsg : "正在加载数据……",
????waitTitle : "提示",
????url : "http://localhost:8080/ExtJsApp/formServlet",
????method : "get",
????success : function (form, action) {
?????Ext.Msg.alert("提示","加载成功!");
????}
???})
??}
??/**reset**/
??function reset() {
???frm.getForm().reset();
??}

?

?后台servlet:

?


?@Override
?protected void doPost(HttpServletRequest request, HttpServletResponse response)
???throws ServletException, IOException {
??response.setContentType("text/json; charset=utf-8");
??String username = request.getParameter("username");
??String smallname = request.getParameter("smallname");
??if (username.equalsIgnoreCase("admin") && smallname.equalsIgnoreCase("ad")) {
???response.getWriter().print("{success:true,errors:{}}");
??} else {
???response.getWriter().print("{success:false,errors:{info:'出错了!'}}");
??}
?}

?

总结:

1、表单动作是表单中数据的加载。要给表单中的字段设置值,可以通过调用字段的setValue方法,也可以直接在初始化字段的时候在配置参数中设置value属性值,另外还有一种方法是通过Ajax的方式从服务器端加载表单中各个字段的值。这种方式也就是我们这里要介绍的表单数据加载。
  ExtJS的表单数据加载通过BasicForm的load方法来进行,表单数据加载动作由类Ext.form.Action.Load定义,执行数据加载动作会到服务器端加载数据,默认情况下服务器端需要返回一个包含success属性及data属性的JSON对象。

2、Ext.Ajax.request([Object options]) : Number

服务器的响应是异步的,因此需要在回调函数中处理服务器端返回的数据。回调函数可以定义在request方法调用的参数options中。另外,在request方法中可以定义Ajax请求的一些其它属性。参数options是一个对象,该对象包含了Ajax请求所需的各种参数及回调处理参数等。options中可以包含的各个属性及含义如下所示:
  url String 指定要请求的服务器端url,默认值为Ajax对象中配置的URL参数值。
  params Object/String/Function 指定要传递的参数,可以是一个包含参数名称及值的对象,也可以是name=xx&birthday=1978-1-1类似的url编码字符串,或者是一个能返回上述两种内容的函数。
  method String 指定发送Ajax请求使用的method,可以是GET或POST方式。默认情况下,如果请求中没有传递任何参数则使用GET,否则使用POST。
  callback Function 指定Ajax请求的回调函数,该函数不管是调用成功或失败,都会执行。传递给回调函数的参数有三个,第一个 options表示执行request方法时的参数,第二个success表示请求是否成功,第三个参数response表示用来执行Ajax请求的 XMLHttpRequest 对象。关于XMLHttpRequest可以通过http://www.w3.org/TR/XMLHttpRequest/查询详细的信息。
  success Function 指定当Ajax请求执行成功后执行的回调函数,传递给回调函数两个参数,第一个参数response表示执行Ajax请求的XMLHttpRequet对象,第二个参数表示执行request方法时的options对象。
  failure Function 指定当请求出现错误时执行的回调函数,传递给回调函数两个参数,第一个参数response表示执行Ajax请求的XMLHttpRequet对象,第二个参数表示执行request方法时的options对象。
  scope Object 指定回调函数的作用域,默认为浏览器window。
  form Object/String 指定要提交的表单id或表单数据对象。
  isUpload Boolean 指定要提交的表单是否是文件上传表单,默认情况下会自动检查。
  headers Object 指定请求的Header信息。