Extjs 表單提交送給新手

標籤：des   io   ar   os   sp   java   for   資料   on   

Extjs的三種提交方式：

表單Ajax提交，普通提交，單獨Ajax提交；

1.表單ajax提交（預設提交方式）

提交函數：當按下表單中的提交按鈕時執行下面的btn函數，按照表單的name進行提交。提交資料後根據背景傳回值不同來回調success或者failure函數（和單獨ajax的提交不同），後台傳回值的形式：
【如果返回outputResult(“{success:true}”)，則調用success的函數。如果返回：outputResult(“{success:false,reason:’”+e.getCause() +”‘}”); 則調用failure函數】

function btn (){

form.getForm.submit({

method:’POST’,

params:{}, // 傳遞的參數

url:save_url, // 定義要跳轉的url，此為屬性必須要有

success: function(form,action){

//Ext.Msg.alert(‘資訊’,”提示：”+”response.responseText”);//加粗體是得到背景具體返回資訊。

Ext.Msg.alert(‘提示’,”資料修改成功”);// 成功提示資訊

store.load(); // 重新載入資料

},

failure:function(form,action){

Ext.Msg.alert(‘提示’,”跳轉失敗”);

}

});

}

2.普通提交：按照表單中的name提交。

Form. = new Ext.FormPanel({

……..// form的屬性

submit:function(){

this.getEl().dom.action =’url’;// 提交的url

this.getEl().dom.method = ‘post’;

this.getEl().dom.submit();

},

});

當按提交按鈕時，執行下面函數：

function btn (){

Form.form.submit();

}

3.extjs的普通ajax提交：

當按下提交按鈕是執行次函數：(注意：不能對form表單提交，也就是說也不能按form中的表單的name提交，只能提交params中的參數。只要能夠提交到後台不管資料能否正確執行就回調success函數，如果網路有故障，或者頁面有錯誤資料到不了後台，就執行failure函數。

後台傳回值的形式：【如果資料處理成功返回outputResult(“{success:true,’……..’}”)。如果資料處理失敗返回：outputResult(“{success:false,reason:’”+e.getCause() +”‘}”);】

我們一般要求是：資料處理成功後顯示成功資訊，失敗後顯示失敗資訊。

但是這種提交不管返回什麼值，都會執行success函數。所以不能滿足我們的要求。為瞭解決這個矛盾我們有一下方法：

我們在js頁面中的success函數中取得傳回值，我們對傳回值進行判斷，如果success是true我門就列印成功資訊，如果success是false我們就列印失敗的提示。

取得傳回值：var responseArray = Ext.util.JSON.decode(response.responseText); 判斷如下：

function btn(){

…..// 定義url，也可以在方法外面

Ext.Ajax.request({

url:url,// 要跳轉的url,此為屬性必須要有

method:’post’,

params:{}, // 提交參數

success: function(response, options)

{

var responseArray = Ext.util.JSON.decode(response.responseText);

if(responseArray.success==true)

{

Ext.example.msg(‘提示’, ‘資料儲存成功’);

}

else{

Ext.Msg.alert(‘錯誤’, responseArray.reason);

}

}

failure:function(response,options)

{

Ext.Msg.alert(‘警告’,”資料處理錯誤原因\”+response.responseText);

}

});

}

json資料格式

{"success":"true","data":{"id":"49","name":"12344553252","description":"adffafdadf"}}

格式很重要，格式正確才能夠在form裡面讀出來。

 

普通方式提交：

                    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();
                        }
                    }

                       

 

預設的Ajax方式提交

 

Extjs 表單提交送給新手