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(){

             var basicForm=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=new Ext.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()){                           

//只用指定TextFieldid或者name属性,服务器端Form中就能取到表单的数据 
 
//如果同时指定了idname,那么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';//GETPOST
                    form.submit();
                }

          }

}]

});

 

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

这种方式将为extajax指定一个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() {

   new Ext.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); 

}

});

}

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值