ExtJS优化系列二之表单提交通用实现方案详解与代码实现

在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 同时支持成功和失败两个分支，方便做统一的后续处理。如果后续想增加全局的提交前验证、防重复提交、日志记录等，直接在这个函数里加即可，一处改动全局生效。