ExtJs经常使用的四种Ajax异步提交

/**

• 第一种Ajax提交方式
• 这种方式须要直接使用ext Ajax方法进行提交
• 使用这种方式，须要将待传递的参数进行封装
• @return / function saveUser_ajaxSubmit1() { Ext.Ajax.request( { url : 'user_save.action', method : 'post', params : { userName : document.getElementById('userName').value, password : document.getElementById('password').value }, success : function(response, options) { var o = Ext.util.JSON.decode(response.responseText); alert(o.msg); }, failure : function() { } }); } /*
• 第二种Ajax提交方式
• 这种方式将为ext的ajax指定一个html表单
• 使用这种方式，不须要将待传递的参数进行封装
• @return / 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); alert(o.msg); }, failure : function() { } }); } /*
• 第三种Ajax提交方式
• 这种方式将为ext的本身的表单进行提交
• 使用这种方式，须要使用ext本身的textField组件
• @return / function saveUser_ajaxSubmit3() { // 定义表单 var formPanel = new Ext.FormPanel( { labelWidth : 75, frame : true, bodyStyle : 'padding:5px 5px 0', width : 350, defaults : { width : 230 }, defaultType : 'textfield', items : [ { fieldLabel : '用户名', name : 'userName', allowBlank : false }, { fieldLabel : '密 码', name : 'password' } ] }); // 定义窗口 var win = new Ext.Window( { title : '添加用户', layout : 'fit', width : 500, height : 300, closeAction : 'close', closable : false, plain : true, items : formPanel, buttons : [ { text : '肯定', handler : function() { var form = formPanel.getForm(); var userName = form.findField('userName').getValue().trim(); var password = form.findField('password').getValue().trim(); if (!userName) { alert('用户名不能为空'); return; } if (!password) { alert('密码不能为空'); return; } form.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); } }); } }, { text : '取消', handler : function() { win.close(); } } ] }); win.show(); } /*
• 第四种Ajax提交方式
• 这种方式将html的表单转化为ext的表单进行异步提交
• 使用这种方式，须要定义好html的表单
• @return */ 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); } }); }