Ext6种异步提交方式

ExtJS的几种提交方式（6种）

最近做的项目都是用的ExtJS框架，随着项目做的越多，接解到的ExtJS的控件和功能也越来越多。下面来总结一下ExtJS中的几种数据提交方式：

1.表单Ajax提交（常用）

表单Ajax提交是我目前用的最多的一种，直接使用form.submit(),它会把form面板上的所有控件的值全部传递后台。Ajax的特点之一就是不刷新页面，提高用户体验。后台必须返回JSON格式，success返回true则执行success:function(form, action)里面的代码，返回false则执行failure:function(form, action)中的代码。

var panel222=new Ext.form.FormPanel({

……//form属性或配置项

buttons:[{

        text:'保存',

        handler:function (){

                   var aa=stag.getForm();//获取面板

                   if(aa.isValid()){//通过验证

                       aa.submit({//提交

                               url : 'Form/stagingDateAdd.ashx', 

                               method : 'POST', 

                               waitTitle : "提示",//等待的标题 

                               waitMsg : '正在提交数据...',//等待的信息 

                               success : function(panel,action){ 

                                   Ext.Msg.alert('信息','信息提交成功！');

                               }, 

                               failure : function(form,action){ 

                                   Ext.Msg.alert('信息','信息提交失败！');

                               } 

                       });

                   }

     }

}] 

});                                                              

 

2. 普通Ajax提交

这种提交方式可以设置传递到后台的参数，如果不想把面板上的控件全部传递到后台，就可以用这种提交方式。需要注意的是，不管后台返回的信息是成功或失败都要执行success:function…，所以要在success方法里面判断一下返回的字符串，如果返回success:true,说明操作成功，返回success:false，说明操作失败。Failure方法是访问不到后台时执行的方法。

var formBasisContent=new Ext.form.FormPanel({

……//form属性或配置项

buttons:[{

        text:"提交",

        handler:function(){

            varbasicForm=formBasisContent.getForm();

              if(basicForm.isValid()){

                Ext.Ajax.request({

                      method:'POST',

                        url:'Form/BasisContentAdd.ashx',

                        params:{ ID:ID },//想要传递到后台的参数

                        success:function(response,action){

                             var resp=Ext.util.JSON.decode(response.responseText);//获取从后台传递回来的字符串

                             if(resp .success==true )

                             {//提交成功，成功访问后台

                                 Ext.Msg.alert("提示","提交成功！");

                              }

                              else

                                 Ext.Msg.alert('错误',resp.errors.info);

                        },

                    failure:function(response,action){ //无法访问后台}

}]

});

以上返回函数也可以这样写：

//指定Ajax请求的回调函数，该函数不管是调用成功或失败，都会执行。

　　　　　callback: function(options, success, response) {

　　　　　　　　if(success){

MsgInfo(response.responseText);

}

　　　　　}

 

3.通过Ext.data.Connection提交数据

这种提交方式在grid中删除行时用到过。此提交方式没有限制返回的数据格式，不过我的项目后台返回的一直都是JSON格式数据，其他格式没有试过。

var conn=newExt.data.Connection();

conn.request({

   url:'Form/BasisContentDelete.ashx',

   params:{ deleteID_basisContent:basisContentID },//要传递的参数

   method:'POST',

   scope:this,

   callback:function(options,success,response){//回调函数

        if(success )

         {//操作成功}

         else//操作失败

             Ext.Msg.alert("失败","删除失败，请重试！");

   }

})

 

以上3种提交方式是我目前做项目时用到过的。下面是查资料时从网上看到的ExtJS提交方式。

 

4.普通方式提交

适合一次操作页面，即提交后跳转到另外一个页面。

var form1= new Ext.FormPanel({

      ……//form属性或配置项

buttons:[{

        text:"提交",

        handler:function(){

             if(form1.form.isValid()){                           

//只用指定TextField的id或者name属性，服务器端Form中就能取到表单的数据 
 //如果同时指定了id和name，那么name属性将作为服务器端Form取表单数据的Key
                    var form = form1.getForm().getEl().dom;
                    form.action = 'submit.aspx?method=Submit1&param1=abc';
//指定为GET方式时,url中指定的参数将失效，表单项转换成url中的key=value传递给服务端
//例如这里指定为GET的话,url为:submit.aspx?param2=你输入的值
                      form.method = 'GET';//GET、POST
                   form.submit();
                }

         }

}]

});

 

5.关于hmtl表单和extJS表单的Ajax提交方式之一

这种方式将为ext的ajax指定一个html表单，使用这种方式，不需要将待传递的参数进行封装（没有params属性，表单全部传递到后台）

function saveUser_ajaxSubmit2(){
      Ext.Ajax.request({
      url :'user_save.action',
      method : 'post',
      form : 'userForm', // 指定表单
      success : function(response, options){//操作成功
           var o =Ext.util.JSON.decode(response.responseText);//获取后台返回JSON格式数据

alert(o.msg);
      }, 

 failure : function() {//操作失败 }

});

}

 

6.关于hmtl表单和extJS表单的Ajax提交方式之二

这种方式将html的表单转化为ext的表单进行异步提交，使用这种方式，需要定义好html的表单（同样不能指定传递参数）

function saveUser_ajaxSubmit4() {

   newExt.form.BasicForm('userForm').submit( {

       waitTitle : '请稍后...',

       waitMsg : '正在保存用户信息,请稍后...',

  url :'user_save.action', 

method :'post', 

success: function(form, action){

 alert(action.result.msg);

},       

failure : function(form, action){

alert(action.result.msg); 

}

});

}