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¶m1=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);
}
});
}