首页 > 代码库 > Extjs 表单提交送给新手
Extjs 表单提交送给新手
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¶m1=abc‘;
//指定为GET方式时,url中指定的参数将失效，表单项转换成url中的key=value传递给服务端
//例如这里指定为GET的话,url为:submit.aspx?param2=你输入的值
//form.method = ‘GET‘;//GET、POST
form.submit();
}
}
默认的Ajax方式提交
Extjs 表单提交送给新手