Extjs之表单提交

Extjs的三种提交方式:

表单Ajax提交,普通提交,单独Ajax提交;

  1. 表单Ajax提交(默认提交方式)

              提交函数:当按下表单中的提交按钮时执行下面的 btn函数,按照表单的 name进行提交。

                            根据后台返回值不同回调success或者failure函数(与单独ajax提交不同)。

                             如果返回outputResult("{success:true}"),调用success函数,

                             如果返回outputResult("{success:false,reason:'"+e.getCause()+"'}");则调用failure函数

               function btn(){

               form.getForm.submit({

               method:'POSt',

               params:{},

               url:"",

               success:function(form,action){        

                //Ext.Msg.alert(‘信息’,”提示:”+”response.responseText”);//加粗体是得到后台的具体返回信息。

                 Ext.Msg.alert(‘提示’,”数据修改成功”);// 成功提示信息

                 store.load(); // 重新加载数据

               },

               failure:function(form,action){

               Ext.Msg.alert('提示','跳转失败');

                }

               });

               }

          2.普通提交:按照表单中的name提交。   

Form. = new Ext.FormPanel({

……..// form的属性

submit:function(){

this.getEl().dom.action =’url’;// 提交的url

this.getEl().dom.method = ‘post’;

this.getEl().dom.submit();

},

});

当按提交按钮时,执行下面函数:

function btn (){

Form.form.submit();

}

3.extjs的普通ajax提交:

当按下提交按钮是执行次函数:(注意:不能对form表单提交,也就是说也不能按form中的表单的name提交,只能提交params中的参数。只要能够提交到后台不管数据能否正确执行就回调success函数,如果网络有故障,或者页面有错误数据到不了后台,就执行failure函数。

后台返回值的形式:【如果数据处理成功返回outputResult(“{success:true,’……..’}”)。如果数据处理失败返回:outputResult(“{success:false,reason:’”+e.getCause() +”‘}”);】

我们一般要求是:数据处理成功后显示成功信息,失败后显示失败信息。

但是这种提交不管返回什么值,都会执行success函数。所以不能满足我们的要求。为了解决这个矛盾我们有一下方法:

我们在js页面中的success函数中取得返回值,我们对返回值进行判断,如果success是true我门就打印成功信息,如果success是false我们就打印失败的提示。

取得返回值:var responseArray = Ext.util.JSON.decode(response.responseText); 判断如下:

function btn(){

…..// 定义url,也可以在方法外面

Ext.Ajax.request({

url:url,// 要跳转的url,此为属性必须要有

method:’post’,

params:{}, // 提交参数

success: function(response, options)

{

var responseArray = Ext.util.JSON.decode(response.responseText);

if(responseArray.success==true)

{

Ext.example.msg(‘提示’, ‘数据保存成功’);

}

else{

Ext.Msg.alert(‘错误’, responseArray.reason);

}

}

failure:function(response,options)

{

Ext.Msg.alert(‘警告’,”数据处理错误原因”+response.responseText);

}

});

}

json数据格式

{"success":"true","data":{"id":"49","name":"12344553252","description":"adffafdadf"}}

格式很重要,格式正确才能够在form里面读出来。           

原文地址:https://www.cnblogs.com/ymj126/p/4120221.html