Ext中Form组件提交后台的3种方式

2019独角兽企业重金招聘Python工程师标准>>>

1，利用表单的原生方式提交，如下：（需要自己调用form.isValid()函数来校验表单参数格式）
      1.x中：
  form.el.dom.action="../excel.do";
  form.el.dom.target="_blank";
  form.el.dom.submit();
        浏览器在新窗口打开../excel.do，并传递表单参数，
 同样这里的../excel.do可以用servlet,jsp等替换。

     2.x中
  form.getForm().getEl().dom.actiong="../excel.do";
  form.getForm().getEl().dom.target="_blank";
  form.getForm().getEl().dom.submit();

   2,利用Ext表单的默认提交  （不需要自己校验，form.submit();函数中会自己校验,但是需要写失败函数或者失败事件，用来提示用户校验失败）
     1.x  form.submit();
     2.x  form.getForm().submit();
     如果form控件定义了URL,那么这两个提交将会请求这个URL并且传递form的参数。其底层实现是Ajax请求。
     如果form控件没有定义 URL,那么这2个submit函数可以传递参数，类似如下：
     Form.submit({url:'confManager/newConfTask.do',waitMsg:'保存数据',waitTitle:"请等候。。。",params{p1:p1,p2:p2},success:sFn,failure:fFn});
     请求会把form控件中的参数和这里submit函数中的参数一同发送到后台。
     由于这种方式存在回调函数和触发事件。
因此如果调用成功会执行sFn这个函数，失败会执行fFn这个函数。    
研究form提交源代码，发现如果定义了actioncomplete，actionfailed.那么根据表单提交的实际情况会触发不同的事件。
     具体说明:
     如果调用到了后台，并且返回成功结果。那么如果定义了success:sFn则先执行sFn，如果定义了actioncomplete，则接着触发actioncomplete对应的事件
     如果调用到了后台，并且返回成功失败。那么如果定义了failure:fFn则先执行fFn，如果定义了actionfailed，则接着触发actionfailed对应的事件

     至于返回结果何为成功，何为失败，可以自己对源码扩展，增加成功失败的判断规则。
补充：

定义表单提交失败的触发事件
Form.on('actionfailed',formReqFail);

 

function formReqFail(f,a){
 if(a.failureType == Ext.form.Action.CLIENT_INVALID)
   Ext.MessageBox.alert('错误', '本地校验错误');
 else if (a.failureType == Ext.form.Action.SERVER_INVALID)
   Ext.MessageBox.alert('错误', '服务器校验错误');
 else if (a.failureType == Ext.form.Action.CONNECT_FAILURE)
   Ext.MessageBox.alert('错误', '连接错误或超时');
 else if (a.failureType == Ext.form.Action.LOAD_FAILURE)
   Ext.MessageBox.alert('错误', 'load 数据错误');
 }

   3，利用Ajax方式提交，（需要自己调用form.isValid()函数来校验表单参数格式）
      直接利用：
      Ext.lib.Ajax.request({
      method :'POST',//提交方式
      url :'excel.jsp',//提交的URL，可以是servlet,*.do,*.action等
      params:{p1:p1,p2:p2},//提交的参数，后台可以通过request.getParameter("p1");获得参数
      success :sFn,//当请求成功时调用的方法
      failure :fFn,//请求失败时调用的方法
      callback :cFn,//当收到HTTP响应时调用的方法。不管请求成功还是失败，回调方法都会被调用
      form :'excelForm'//form>表单 元素或者<form>的id ，可以从其中获取参数 
});

      根据Ext的Api自行决定需要哪些配置项。

转载于:https://my.oschina.net/journeyAya/blog/7686