在ExtJS开发过程中，异步提交表单是每名开发者都会遇到的常见需求。本文总结了四种最实用的Ajax提交方法，每种都对应着不同的应用场景。从代码实现来看，后两种更贴近ExtJS的原生风格，但前两种在特定环境下依然能发挥重要作用。下面逐一进行详细分析。
方式一：手动封装参数，直接发起请求
第一种方式最为直观：通过Ext.Ajax.request，利用params属性手动将表单元素的值拼接成JSON对象发送。优势在于灵活度高，你可以在请求发出前对参数进行任意预处理；缺点也显而易见——每个字段都需要手动取值，当表单字段较多时，这种方式的维护成本会显著增加。
function sa veUser_ajaxSubmit1() {
Ext.Ajax.request({
url : 'user_sa ve.action',
method : 'post',
params : {
userName : document.getElementById('userName').value,
password : document.getElementById('password').value
},
success : function(response, options) {
var o = Ext.util.JSON.decode(response.responseText);
alert(o.msg);
},
failure : function() {
}
});
}
这段代码逻辑非常清晰：从页面DOM元素中获取输入值，封装成JSON，再发起异步请求。返回结果通过Ext.util.JSON.decode解析为对象，最后通过弹窗显示信息。简单直接，但不够“Ext化”，因为依旧依赖原始的DOM操作。
方式二：直接绑定表单，省时省力
第二种方式则要人性化得多——无需手动拼接参数，只需在Ext.Ajax.request中传入一个form属性，指定表单的HTML id，框架便会自动收集该表单中的所有字段并提交。
function sa veUser_ajaxSubmit2() {
Ext.Ajax.request({
url : 'user_sa ve.action',
method : 'post',
form : 'userForm', // 指定表单
success : function(response, options) {
var o = Ext.util.JSON.decode(response.responseText);
alert(o.msg);
},
failure : function() {
}
});
}
从代码量对比，这段明显比第一种精简。核心在于form : 'userForm'这一行，直接关联了页面中已有的HTML表单。对于对ExtJS组件化要求不高的项目，这种方案无疑是最省心的选择。
方式三：全Ext组件化，真正落地的表单处理
到了第三种方式，才充分体现出ExtJS框架的完整能力。从表单构建开始，便使用Ext的FormPanel和TextField组件，再配合Ext.Window弹出窗口。尽管这种方式代码量最大，但它在实际项目中应用最广——因为整套UI风格统一，交互体验也更为流畅。
function sa veUser_ajaxSubmit3() {
var formPanel = new Ext.FormPanel({
labelWidth : 75,
frame : true,
bodyStyle : 'padding:5px 5px 0',
width : 350,
defaults : {
width : 230
},
defaultType : 'textfield',
items : [ {
fieldLabel : '用户名',
name : 'userName',
allowBlank : false
}, {
fieldLabel : '密 码',
name : 'password'
} ]
});
var win = new Ext.Window({
title : '添加用户',
layout : 'fit',
width : 500,
height : 300,
closeAction : 'close',
closable : false,
plain : true,
items : formPanel,
buttons : [ {
text : '确定',
handler : function() {
var form = formPanel.getForm();
var userName = form.findField('userName').getValue().trim();
var password = form.findField('password').getValue().trim();
if (!userName) {
alert('用户名不能为空');
return;
}
if (!password) {
alert('密码不能为空');
return;
}
form.submit({
waitTitle : '请稍后...',
waitMsg : '正在保存用户信息,请稍后...',
url : 'user_sa ve.action',
method : 'post',
success : function(form, action) {
alert(action.result.msg);
},
failure : function(form, action) {
alert(action.result.msg);
}
});
}
}, {
text : '取消',
handler : function() {
win.close();
}
} ]
});
win.show();
}
这段代码中有几个值得关注的细节：非空校验在TextField定义时通过allowBlank : false配置，提交前又进行了一次手动校验。在实际开发中，虽然Ext内置的校验机制可以自动完成，但许多项目仍然会显式执行这一步骤，以确保数据完整性。
提交时使用的是form.submit而非Ext.Ajax.request——两者的关键区别在于：form.submit会自动携带表单中所有字段的值，同时返回值处理也经过了封装，通过action.result.msg就能直接获取服务端返回的信息，省去了手动JSON解析的步骤。
方式四：将HTML表单“升级”为Ext表单
第四种方式利用Ext.form.BasicForm对现有的HTML表单进行包装，然后直接提交。这相当于为原生表单套上一层Ext的外壳，优势在于无需重构页面上的表单结构，只需通过new Ext.form.BasicForm('userForm')引用表单ID即可。
function sa veUser_ajaxSubmit4() {
new Ext.form.BasicForm('userForm').submit({
waitTitle : '请稍后...',
waitMsg : '正在保存用户信息,请稍后...',
url : 'user_sa ve.action',
method : 'post',
success : function(form, action) {
alert(action.result.msg);
},
failure : function(form, action) {
alert(action.result.msg);
}
});
}
从代码层面看，这种写法最为精简——不需要手动拼接参数，不需要定义表单组件，甚至连FormPanel都不再需要。只要页面中存在一个ID为userForm的HTML表单，一行核心代码即可完成异步提交。非常适合页面结构已经固定、又不希望大范围改动的旧项目改造场景。
以上四种方式在实际开发中各有其适用场景。日常项目中，方式三使用频率最高；方式四适合对现有表单进行异步封装；而方式一和方式二更适用于对UI一致性要求不高、追求快速实现的场景。掌握了这几种方案，基本上就能应对ExtJS表单提交中的绝大多数需求。
