游乐游手机版
首页/前端开发/文章详情

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

时间:2026-06-16 07:04
将表单提交通用逻辑封装为$postForm函数,仅13行代码即可覆盖校验、提交、成功 失败回调及等待提示等场景,避免控制器中重复编写。通过传入配置对象调用,支持作用域控制与统一回调处理,减少代码冗余,便于全局扩展如防重复提交等功能。

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

来源:https://www.jb51.net/article/35574.htm
上一篇使用ANT压缩JS文件去除空格注释提升运行速度 下一篇ExtJs修改默认字体大小的几种实用方法
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容,方便继续浏览更多相关内容。

同类最新

继续查看同栏目最近更新的文章。

更多
Vue应用中异步更新性能问题的优化策略详解
前端开发 · 2026-07-03

Vue应用中异步更新性能问题的优化策略详解

先来看一个令许多开发者感到困惑的场景:明明修改了数据,DOM 却“毫无反应”,无法获取最新的高度,也无法计算正确的坐标。这并非 Vue 的缺陷,反而是它精心设计的性能优化策略。核心在于——你需要学会与它“异步更新”的特性协作,而非硬碰硬。 所谓的“异步更新性能问题”,本质上是一种认知偏差。Vue 的

如何避免原型对象挂载大体积动态数组内存污染
前端开发 · 2026-07-03

如何避免原型对象挂载大体积动态数组内存污染

原型链上的大数组:一个隐蔽的内存冲击波 先给个核心判断:直接在原型对象上挂载一个大体积动态数组,这既不是传统意义上的内存“污染”,也不是安全漏洞那种“污染”,而是一种相当隐蔽但后果严重的内存管理失当。它会导致所有实例共享同一份数据,而且正因为生命周期跟整个原型链绑定得太紧,垃圾回收器(GC)根本看不

利用堆栈信息精准定位显式绑定错误对象致未定义异常
前端开发 · 2026-07-03

利用堆栈信息精准定位显式绑定错误对象致未定义异常

深入追踪:显式绑定传错对象引发的未定义异常 说实话,这类问题在JavaScript开发中相当常见——显式绑定传错了对象,然后方法执行时静默失败、访问undefined、或者抛出TypeError。但真正的难点不在于“报了什么错”,而在于“到底是哪个对象被绑错了”。要解决它,需要跳出堆栈的表层报错信息

ES模块中默认导出和具名导出的执行上下文
前端开发 · 2026-07-03

ES模块中默认导出和具名导出的执行上下文

export default 与具名导出在 ES Module 中的行为机制截然不同,核心差异不在于“值如何传递”,而在于绑定如何建立以及导入时如何使用。先给出总结性结论,再逐一详细拆解。 export default 是一种语法糖,而非真正的变量声明 这种设计容易引起误解。实际上,export d

详解HTML中iframe标签loading=lazy属性实现嵌入内容懒加载方法
前端开发 · 2026-07-03

详解HTML中iframe标签loading=lazy属性实现嵌入内容懒加载方法

先聊聊 loading= "lazy " 这个属性——它本意是让 iframe 实现延迟加载,但实际落地时常常“失效”。这并非程序漏洞,而是浏览器内置的防御机制:只有所有条件同时触发,它才会真正推迟资源请求。比如 src 必须是跨域地址(类似 https: widget example com emb