在ExtJS项目开发中,表单提交是最高频的操作之一。如果每次都在控制器里手写提交逻辑,不仅代码冗余,还容易出错。一个比较务实的做法是把提交逻辑封装成通用函数,需要时直接调用。下面这个 $postForm 函数就是干这事的——别看它只有十几行,但覆盖了校验、提交、成功/失败回调、等待提示等常用场景。
复制代码 代码如下:
/**
* 提交表单
*/
function $postForm(a) {
if (a.formPanel.getForm().isValid()) {
var b = a.scope ? a.scope: this;
a.formPanel.getForm().submit({
scope: b,
url: a.url,
method: "post",
params: a.params,
waitMsg: "正在提交数据...",
success: function(c, d) {
Ext.ux.Toast.msg("操作信息", "成功信息保存!");
if (a.callback) {
a.callback.call(b, c, d);
}
},
failure: function(c, d) {
Ext.MessageBox.show({
title: "操作信息",
msg: "信息保存出错,请联系管理员!",
buttons: Ext.MessageBox.OK,
icon: "ext-mb-error"
});
if (a.callback) {
a.callback.call(b);
}
}
});
}
}
对比原始写法(25~30行),这段封装代码只有13行,却能处理大部分表单提交流程。核心思路很简单:传入一个配置对象 a,包含表单面板、URL、参数、作用域和回调函数。内部先做有效性校验,然后调用 submit 方法,成功时弹出 Toast 提示并执行回调,失败时弹出错误对话框并仍然执行回调(可用于界面回退等操作)。
下面是在实际业务中的调用示例——保存一条学生部门记录,提交完成后自动刷新列表并关闭窗口:
复制代码 代码如下:
sa veRecord: function() {
$postForm({
formPanel:this.formPanel,
scope:this,
url: __ctxPath + "/basedata/sa veStudentDepartment.action",
params:{},
callback: function(d, f) {
var e = Ext.getCmp("StudentDepartmentGrid");
if (e != null) {
e.getStore().reload();
}
b.close();
}
});
}
这样一封装,每个业务模块的提交逻辑就变得非常清爽。需要关注的点:scope 参数用于控制回调中的 this 指向,避免上下文混乱;callback 同时支持成功和失败两个分支,方便做统一的后续处理。如果后续想增加全局的提交前验证、防重复提交、日志记录等,直接在这个函数里加即可,一处改动全局生效。
