ExtJS4中给同一个FormPanel设置不同URL的方法

先来看一个典型的 FormPanel 用法示例，来自 ExtJS4 官方 API 文档：

复制代码 代码如下:

var panel=Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,

// 通过 AJAX 请求提交到此 URL
//url: 'sa ve-form.php',

// 表单域 Fields 将竖直排列，占满整个宽度
layout: 'anchor',
defaults: {
anchor: '100%'
},

// 字段定义
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}],

// 重置与保存按钮
buttons: [{
text: '重置',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: '保存',
formBind: true, // 表单有效时才启用
disabled: true,
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {
Ext.Msg.alert('保存成功', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('操作失败', action.result.msg);
}
});
}
}
}],
renderTo: Ext.getBody()
);

不过，翻阅 API 文档时会发现，FormPanel 本身并没有 url 配置项，也没有专门获取它的方法……实际上这个配置是继承自父类——BasicForm 的。

进一步查看 Ext.form.Basic，果然，url 配置项是在那里定义的。在 ExtJS 的设计中，FormPanel 并不直接保存表单数据，数据由 BasicForm 统一管理。提交表单时，需要先获取当前 FormPanel 中的 BasicForm 对象，然后再执行提交操作。

假设项目中需要两个功能相似的组件，唯一的区别就是提交的 URL 不同。我的做法是：定义组件时不指定 url，等组件添加到不同容器时再动态赋值。以上面的示例为例，在需要的地方：

复制代码 代码如下:

panel.getForm().url='../LogSelectServlet';// 在不同位置可以像这样赋予不同的 URL 值

这种方法对于组件的复用来说，是一个非常实用的技巧。