Ext formpanel 动态添加 表单 的一种实现方法
参照：http://topic.csdn.net/u/20081014/15/eda4c8f2-ce33-417f-a2bd-9cbb28560df0.html?seed=411130653
在这个帖子中已经说的很明白了，我只是将他们说的方法，具体的写成能执行的代码，望能给有同类需求的人一些帮助，
HTML写法：
说明：ext-all.css、ext-base.js、ext-all.js是运行Ext必须的三个文件，大家可以在下载的Ext目录结构中找到，
aa.js是我们实现的功能代码。
aa.js
/*
* Ext JS Library 2.3.0
* Copyright(c) 2006-2009, Ext JS, LLC.
* [email protected]
*
* http://extjs.com/license
*/
Ext.onReady(function() {
var fp = new Ext.form.FormPanel({
frame:true,
width:'300',
waitMsgTarget : true,
border:true,
bodyStyle:'width:707',
layout:'column',
waitMsgTarget : true,
autoScroll:false,
fileUpload : true,
items: [
{
columnWidth:1,
layout:'column',
items:[
{
columnWidth:0.25
},{
columnWidth:0.55,
layout:'form',
labelWidth:128,
style:'padding-top:10px',
items:[
{
xtype:'textfield',
fieldLabel:'技术人员信息标题',
width:150,
name:'Title'
}
]//items3 over
},{
columnWidth:0.2
}
]//items2 over
},{
columnWidth:1,
layout:'column',
items:[
{
columnWidth:0.75
},{
columnWidth:0.25,
layout:'form',
labelWidth:40,
style:'padding-top:10px',
items:[
{
xtype:'textfield',
fieldLabel:'编号',
width:100,
name:'Bh'
}
]//items3 over
}
]//items2 over
},{
columnWidth:1,
style:'padding-top:10px',
layout:'column',
bodyStyle:'text-align:center',
items:[{
columnWidth:0.25,
html:"技术类别"
},{
columnWidth:0.25,
html:"地 区"
},{
columnWidth:0.25,
html:"供求情况"
},{
columnWidth:0.25,
html:"基本工资水平"
}]
},{
columnWidth:1,
style:'padding-top:3px',
layout:'column',
bodyStyle:'text-align:center',
items:[{
columnWidth:0.25,
items:[{
columnWidth:0.25,
items:[{
xtype:'textfield',
maxLength:50,
width:150,
name:'Jslb'
}]
}]
},{
columnWidth:0.25,
items:[{
columnWidth:0.25,
items:[{
xtype:'textfield',
maxLength:50,
width:150,
name:'Dq'
}]
}]
},{
columnWidth:0.25,
items:[{
columnWidth:0.25,
items:[{
xtype:'textfield',
maxLength:50,
width:150,
name:'Gqzk'
}]
}]
},{
columnWidth:0.25,
items:[{
columnWidth:0.25,
items:[{
xtype:'textfield',
maxLength:50,
width:150,
name:'Gzzk'
}]
}]
}]
},{
columnWidth:1,
style:'padding-top:8px;padding-left:14',
items:[{
xtype:'button',
text:'点击生成下一行',
handler:function(){
var _panel = this.ownerCt;
var _textfield = new Ext.form.TextField({width:150});
_panel.add(_textfield);
_panel.doLayout();
}
}]
}
]
,buttons:[
{
id:'btnOk',
text:'确 定',
handler:function()
{
Ext.MessageBox.show
(
{
msg: '正在保存，请稍等...',
progressText: 'Saving...',
width:300,
wait:true,
waitConfig: {interval:200},
icon:'download',
animEl: 'saving'
}
);
fp.form.submit
(
{
success:function(form,action)
{
var flag = action.result.success;
if (flag == true)
{
Ext.MessageBox.alert('恭喜','添加信息成功!');
Datas.reload();
newWin.destroy();
}
},
failure:function()
{
Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
}
}
);
}
},{
text:'关 闭',
handler:function()
{
newWin.destroy();
}
}
]
});
var window = new Ext.Window({
layout:'fit',
resizeHandles:'ns',
resizable :true,
width:740,
closable:false,
height:400,
minWidth:740,
frame:true,
minHeight:400,
collapsible:false,
closeAction : 'hide',
autoScroll:true,
plain : false,
modal: 'true',
title : '添加技术人员动态信息'
,items: fp
});
window.show();
});
说明：两个按钮的方法，没有实现，重要的部分我用颜色标出。