Extjs4之动态添加FormPanel
功能实现：点击界面上的按钮实现，动态的在FieldSet中添加Panel，并将动态添加的Panel中包含的值传递给后台。具体实现如下：
var AddDep = function (item, grid) {
var now = new Date().toLocaleDateString();
var num = 0;
Ext.QuickTips.init();
var majorFS = Ext.create('Ext.form.FieldSet', {
title: 'aa信息',
layout: 'anchor',
height:120,
autoScroll:true
});
var depform = Ext.create('Ext.form.Panel', {
frame: false,
border: false,
collapsible: false,
style: 'margin: 0 0px 0 10px',
layout: 'anchor',
labelWidth: 30,
labelAlign: 'center',
defaults: { anchor: '100%' },
items: [
{
xtype: 'fieldset',
title: 'xx信息',
layout: { type: 'table', columns: 2 },
items: [
{ xtype: 'hidden', name: 'depId' },
{
xtype: 'textfield',
name: 'name',
fieldLabel: '名称',
allowBlank: false,
blankText: '名称不能为空',
regex: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
regexText: '格式应由汉字、数字、字母或下划线组成.',
maxLength: 20,
maxLengthText: "名称长度不能多于20个字！",
msgTarget: 'side',
width: 310,
style: 'margin: 3px 0 5px 0',
colspan: 2
},
{
xtype: 'textfield',
name: 'leader',
fieldLabel: '领导',
regex: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
regexText: '格式应由汉字、数字、字母或下划线组成.',
maxLength: 20,
maxLengthText: "系部领导姓名长度不能多于20个字！",
msgTarget: 'side',
width: 310,
style: 'margin: 3px 0 5px 0'
},
{ xtype: 'textfield', name: 'leaderPhone', fieldLabel: ' 电话', regex: /^[0-9]+$/, regexText: '只能由数字组成.', msgTarget: 'side', width: 310, style: 'margin: 3px 0 5px 0' },
{
xtype: 'panel',
marings: '5 0 0 5',
layout: 'anchor',
border: false,
colspan: 2,
items: [
{ xtype: 'label', text: 'aa信息:', width: 320, style: 'margin: 3px 0 0 0' },
{ xtype: 'button', text: '添加', style: 'background: #368ECE;border-color:#126DAF;margin: 3px 0 5px 50px',
handler: function () {
num++;
if (majorFS.isHidden()) {
majorFS.show();
}
majorFS.add({
xtype: 'form',
marings: '5 0 0 5',
layout: 'anchor',
itemId: 'depForm' + num,
border: false,
items: [
{
xtype: 'textfield',
name: 'majorName',
fieldLabel: 'aa名称' + num,
allowBlank: false,
blankText: 'aa名称不能为空',
regex: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
regexText: '格式应由汉字、数字、字母或下划线组成.',
maxLength: 20,
maxLengthText: "aa名称长度不能多于20个字！",
msgTarget: 'side',
width: 320,
style: 'float:left;margin: 10px 0 10px 0'
},
{
xtype: 'button',
text: '删除',
style: 'background: #368ECE;border-color:#126DAF;margin: 10px 0 10px 50px',
handler: function () {
var curPanel = this.getBubbleTarget();
majorFS.remove(curPanel);
if (majorFS.items.length == 0) {
majorFS.hide();
}
num--;
}
}
]
});
depform.add(majorFS);
}
}
]
}
]
}
]
});
//获取fieldSet中包含的aa信息表单(form)，并且获取表单中值。将表单值组成一个字符串参数值传递给后台
function getMajorParams() {
var majorParam = "";
var childCollection = majorFS.items;
var formCount = childCollection.length;
if (formCount <= 0) {
return majorParam;
}
for (var i = 0; i < formCount; i++) {
var majorFormPanel = childCollection.getAt(i);
if (majorFormPanel.isXType('form')) {
var mName = majorFormPanel.getForm().findField('majorName').getValue();
majorParam = majorParam + 'majorName:' + mName;
}
majorParam = majorParam + '#'
}
return majorParam;
}
if (item == null) {
var win = Ext.create('Ext.window.Window', {
modal: false,
title: '添加xx信息',
width: 675,
icon: 'icon/report.png',
closeAction: 'destroy',
resizable: false,
border: false,
bodyStyle: 'padding:3px',
items: [depform],
bbar: Ext.create('Ext.toolbar.Toolbar', {
style: 'background:#DFEAF2;margin-right:2px',
items: ['->',
{
xtype: 'button',
text: '添加',
icon: 'icon/add.png',
handler: function () {
var f = depform.getForm();
var depName = f.findField('name').getValue();
var leader = f.findField('leader').getValue();
var leaderPhone = f.findField('leaderPhone').getValue();
//调用getMajorParams()方法获取aa信息并组成“majorName:abc#majorName:abc#”的字符串
var majorParam = getMajorParams();
if (f.isValid()) {
Ext.Ajax.request({
url: 'Admin/aspx/DepInf/Add.aspx',
params: {
depName: depName,
leader: leader,
leaderPhone: leaderPhone,
majorParam: majorParam
},
success: function (response) {
var json = Ext.decode(response.responseText);
if (json.success) {
Ext.Msg.alert('系统提示', json.msg, function () {
grid.getStore().reload();
win.close();
});
} else {
Ext.Msg.alert("系统提示", json.msg);
}
},
failure: function (action) {
var json = Ext.decode(response.responseText);
Ext.Msg.alert('系统提示', json.msg);
}
});
}
}
}, '-', {
xtype: 'button',
text: '重置',
icon: 'icon/reload.png',
handler: function () {
depform.getForm().reset();
}
}, '-', {
xtype: 'button',
text: '关闭',
icon: 'icon/control_power.png',
handler: function () {
win.close();
win.destroy();
}
}
]
})
});
}
win.show();
}1、创建一个需要在界面中显示出来的Form(depform)，包含一个按钮及其他控件
2、创建一个FieldSet，用于动态的向该FieldSet中添加Panel
3、创建一个Window，将第1步创建的Form加载到其中
4、添加Form中按钮的点击事件：如果是第一次添加，就在该FieldSet控件中添加Panel，然后再添加到Form中。如果是已经添加了一次Panel，后又将该Panel删除了，在这个FieldSet中已经不包含Panel，它就会将该FieldSet隐藏。然后想要继续在该FieldSet中添加Panel，就将该FieldSet显示出来，然后在向里面添加Panel。
5、将动态添加的Panel的值，传递到后台：
- 获取FieldSet中所有items(控件)：var childCollection = majorFS.items;
- 获取items的个数：var formCount = childCollection.length;
- 通过循环，获取里面的Panel，然后再获取Panel里面控件的值，并将值进行拼接
- 使用Ext.Ajax.Request()方法将参数传递到后台
注意事项：
当将FieldSet中的所有Panel删除时，不将该FieldSet从Form中删除，是因为如果将FieldSet从Form中删除，那该FieldSet在该Form中不存在了。如果再次进行添加时，怎么添加不进来，甚至会报错。这就是为什么使用隐藏而不是删除的原因。