Extjs提交form表单的方式

extJS提交服务器主要有这样几种方式: Ext.Ajax.request,form.submit,getEl().dom.submit(),以下是详细介绍:

1、EXT的form表单ajax提交（默认提交方式）

相对单独的ajax提交来说优点在于能省略写参数数组，将按钮添加单击事件，执行以下方法

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

function loginSubmit(item) {     if (validatorForm()) {         // 登录时将登录按钮设为disabled，防止重复提交         this .disabled = true ;         // 第一个参数可以为submit和load         formPanl.form.doAction( 'submit' , {         url : 'login.do?method=login' ,         method : 'post' ,         // 如果有表单以外的其它参数，可以加在这里。         //我这里暂时为空，也可以将下面这句省略         params : '' ,         // 第一个参数是传入该表单，         //第二个是Ext.form.Action对象用来取得服务器端传过来的json数据         success : function (form, action) {            Ext.Msg.alert( '操作' , action.result.data);            this .disabled = false ;         },         failure : function (form, action) {            Ext.Msg.alert( '警告' , '用户名或密码错误！' );            // 登录失败，将提交按钮重新设为可操作            this .disabled = false ;         }        });         this .disabled = false ;       } }

2、EXT的form表单直接submit提交

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

var fp = Ext.create( 'Ext.form.Panel' , {    ...    buttons: [{      text: 'Save' ,      formBind: true ,      handler: function (){        if (fp.getForm().isValid()){          fp.getForm().submit({          url: 'form-submit.php' ,          waitMsg: '请稍后,正在提交数据...' ,        success: function (form, action){            Ext.Msg.alert( '操作' , action.result.data);        },        failure: function (form, action){          if (action.failureType === Ext.form.action.Action.CONNECT_FAILURE) {           Ext.Msg.alert( '错误' , 'Status:' +action.response.status+ ': ' +                  action.response.statusText);          }          if (action.failureType === Ext.form.action.Action.SERVER_INVALID){                  Ext.Msg.alert( 'Invalid' , action.result.errormsg);            }         }       });          }       }    },{        text: 'Reset' ,        handler: function (){          fp.getForm().reset();        }    }] });

3、Extjs form表单的非ajax提交

在表单需加入下列代码 :

 

?

1 2 3 4 5 6 7 8

//实现非AJAX提交表单一定要加下面的两行 // onSubmit : Ext.emptyFn, submit : function() {  //再次设定action的地址  this .getEl().dom.action = 'login.do?userName=login' ; this .getEl().dom.method = 'post' ;  //提交submit     this .getEl().dom.submit(); }

4、Extjs form表单的Ext.Ajax.request提交

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

Ext.Ajax.request({         //请求地址          url: 'login.do' ,          method: 'post' ,          //提交参数组           params: {              userName:Ext.get( 'userName' ).dom.value,              userPassword:Ext.get( 'userPassword' ).dom.value           },           //成功时回调           success: function (response, options) {             //获取响应的json字符串             var json = Ext.util.JSON.decode(response.responseText);              if (json.success== true ){                Ext.Msg.alert( '恭喜' , '您已成功登录!' );                 }             else {                Ext.Msg.alert( '失败' , '登录失败，请重新登录' );             }         })      });