extjs中form表单提交注意点

最近在项目中使用了extjs,在使用过程中发现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
33
34
35
36
37
38
39
40
41
42
参数:
actionName : String/Object
预定义的操作类型名称, 或者需要执行的Ext.form.Action 的实例。
options : Object
(可选) 传递给Ext.form.Action 的配置项。 submit和load操作支持以下列出的所有配置选项,除非有特殊说明(定制的操作也可以接收其他的配置选项):
url : String
操作的url (默认为表单的url。)

method : String
表单的提交方式(默认为表单的提交方式,如果未指定则为POST)

params : String/Object
The params to pass (默认值为表单的 baseParams,如果未定义则为none。)

headers : Object
此操作的请求头部信息 (默认值为表单的默认头部信息)(译者注:指HTTP协议头信息。)

success : Function
在成功收到响应之后回调的方法。注意:这只是指HTTP请求成功(事务被正确地发送和接收),但是响应的结果仍然可以包含错误数据。方法将会被传递以下参数:

form : Ext.form.BasicForm
请求此操作的表单
action : Ext.form.Action
Action类. 可以检查此对象的 result 属性,以执行特定的处理。

failure : Function
当尝试操作失败时回调的方法。注意:这只是HTTP操作失败,意味着服务器返回了HTTP错误状态码。方法将会被传递如下参数:

form : Ext.form.BasicForm
请求此操作的表单
action : Ext.form.Action
Action类. 如果发生了一个Ajax错误,错误类型在 failureType 参数中。可以检查此对象的 result 属性,以执行特定的处理。

scope : Object
调用回调函数的作用域 (也就是回调函数的this引用)。

clientValidation : Boolean
只对Submit操作可用。指定是否在最终提交之前调用 isValid 方法来校验表单。设置为false可阻止此操作。 如果不指定,提交之前将进行校验操作。

返回值:
BasicForm
this

额外的参数可以通过params传递,也可以通过url追加的方式传递

问题

以下是代码

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
formParan.getForm().submit({
url : 'schudule/cash',
method:'post',
failure: function(){
Ext.Msg.alert("提示","操作失败");
messagestore.reload();
},
success : function(form, action) {
Ext.Msg.alert("提示","操作成功");
win.hide();
formParan.getForm().reset();
messagestore.reload();
}
});

后台代码:

res.setHeader('Content-Type', 'application/json;charset=utf-8');

if(bOperate)
{
var result = {'operate':'success', message':'success'}
res.json(result);
}
else
{
var result = {'operate':'failure', 'message':'认证的key错误,请和客服确认key'}
res.json(result);
}

在测试过程中,后台返回成功的时候,前台一直走不到success中去。debug下看到http的状态码是200,按往常ajax的使用习惯来说应该走到success中去。
但是死活不行。后来才发现,运来extjs中form的submit调用需要后台给前端返回一个success的操作码,通过该操作码是true还是false来决定执行success还是failure代码段。

解决方案

需要修改后台代码,增加success:true/false来给前端区分成功失败的标识。

1
2
3
4
5
6
7
8
9
10
11
12
13
res.setHeader('Content-Type', 'application/json;charset=utf-8');

if(bOperate)
{
var result = {'success':true, message':'success'}
res.json(result);
}
else
{
var result = {'success':false, 'message':'认证的key错误,请和客服确认key'}
res.json(result);
}

文章目录
  1. 1. 语法
  2. 2. 问题
  3. 3. 解决方案