用的column布局,點選一個按鈕能添加一行元件，如文本框，有下拉框等。
如：
效果：
實作方法如下：
/*!
* Ext JS Library 3.4.0
* Copyright(c) 2006-2011 Sencha Inc.
* [email protected]
* http://www.sencha.com/license
*/
Ext.onReady(function(){
// 添加按鈕
var newDept_action = new Ext.Action({
cls: 'x-btn-text-icon bmenu',
icon: 'icon-add',
text: '添加新的部門(新的一行)',
handler: function(){
id = id + 1;
//添加新的fieldSet
var org_fieldSet = new Ext.Panel({
//column布局控件開始
id: 'org_fieldSet_' + id,
layout: 'column',
border: false,
items: [//元件開始
{
columnWidth: .2,
layout: 'form',
border: false,
items: [{
//為空
blankText: '組織名稱不能為空',
emptyText: '',
editable: false,
triggerAction: 'all',
allowBlank: false,
//為空
xtype: 'textfield',
fieldLabel: '組織名稱',
id: 'org_field_orgName_' + id,
name: 'org_field_orgName_' + id,
anchor: '90%'
}]
} //元件結束
, //元件開始
{
columnWidth: .2,
layout: 'form',
border: false,
items: [{
//為空
blankText: '上級部門不能為空',
emptyText: '',
editable: false,
triggerAction: 'all',
allowBlank: false,
//為空
xtype: 'textfield',
fieldLabel: '上級部門',
id: 'org_field_orgParent_' + id,
anchor: '90%'
}]
} //元件結束
, //按鈕開始
{
columnWidth: .2,
layout: 'form',
border: false,
items: [{
xtype: 'button',
text: '選擇上級部門',
scope: this,
handler: function(){
}
}]
} //按鈕結束
, //元件開始
{
columnWidth: .2,
layout: 'form',
border: false,
items: [{
//為空
blankText: '上級部門不能為空',
emptyText: '',
editable: false,
triggerAction: 'all',
allowBlank: false,
//為空
//xtype: 'hidden',
xtype: 'textfield',
fieldLabel: '本部門ID',
value: 'org_field_orgId_' + id,
anchor: '90%'
}]
} //元件結束
, //按鈕開始
{
columnWidth: .2,
layout: 'form',
border: false,
items: [{
xtype: 'button',
text: '删除',
value: id,
scope: this,
handler: function(obj){
var del_id = obj.value;
//var field_1 = Ext.getCmp('org_field_orgName_' + del_id);
var fieldSet_1 = Ext.getCmp('org_fieldSet_' + del_id);
//删除一行
simple.remove(fieldSet_1, true);
}
}]
} //按鈕結束
]
//column布局控件結束
});
//添加fieldSet
simple.add(org_fieldSet);
//重新劇新
simple.doLayout();
},
iconCls: 'blist'
});
var first_Org_fieldSet = new Ext.Panel({
//column布局控件開始
id: 'org_fieldSet_' + id,
layout: 'column',
border: false,
items: [//元件開始
{
columnWidth: .2,
layout: 'form',
border: false,
items: [{
//為空
blankText: '組織名稱不能為空',
emptyText: '',
editable: false,
triggerAction: 'all',
allowBlank: false,
//為空
xtype: 'textfield',
fieldLabel: '組織名稱',
id: 'org_field_orgName_' + id,
name: 'org_field_orgName_' + id,
anchor: '90%'
}]
} //元件結束
, //元件開始
{
columnWidth: .2,
layout: 'form',
border: false,
items: [{
//為空
blankText: '上級部門不能為空',
emptyText: '',
editable: false,
triggerAction: 'all',
allowBlank: false,
//為空
xtype: 'textfield',
fieldLabel: '上級部門',
id: 'org_field_orgParent_' + id,
anchor: '90%'
}]
} //元件結束
, //按鈕開始
{
columnWidth: .2,
layout: 'form',
border: false,
items: [{
xtype: 'button',
text: '選擇上級部門',
scope: this,
handler: function(){
}
}]
} //按鈕結束
, //元件開始
{
columnWidth: .2,
layout: 'form',
border: false,
items: [{
//為空
blankText: '上級部門不能為空',
emptyText: '',
editable: false,
triggerAction: 'all',
allowBlank: false,
//為空
//xtype: 'hidden',
xtype: 'textfield',
fieldLabel: '本部門ID',
value: 'org_field_orgId_' + id,
anchor: '90%'
}]
} //元件結束
, //按鈕開始
{
columnWidth: .2,
layout: 'form',
border: false,
items: [{
xtype: 'button',
text: '删除',
value: id,
scope: this,
handler: function(obj){
var del_id = obj.value;
//var field_1 = Ext.getCmp('org_field_orgName_' + del_id);
var fieldSet_1 = Ext.getCmp('org_fieldSet_' + del_id);
simple.remove(fieldSet_1, true);
}
}]
} //按鈕結束
]
//column布局控件結束
});
//定義表單
var simple = new Ext.FormPanel({
labelAlign: 'left',
title: '添加子部門',
buttonAlign: 'right',
bodyStyle: 'padding:5px',
//width: 600,
autoHeight: true,
autoWidth: true,
//
frame: true,
labelWidth: 80,
// items: [ ] ,
buttons: [{
text: '儲存',
type: 'submit',
//定義表單送出事件
handler: function(){
if (simple.form.isValid()) {//驗證合法後使用加載進度條
Ext.MessageBox.show({
title: '請稍等',
msg: '正在加載...',
progressText: '',
width: 300,
progress: true,
closable: false,
animEl: 'loding'
});
//控制進度速度
var f = function(v){
return function(){
var i = v / 11;
Ext.MessageBox.updateProgress(i, '');
};
};
for (var i = 1; i < 13; i++) {
setTimeout(f(i), i * 150);
}
//送出到伺服器操作
simple.form.doAction('submit', {
url: newSaveOrgFrameUrl,//檔案路徑
method: 'post',//送出方法post或get
params: '',
//送出成功的回調函數
success: function(form, action){
if (action.result.msg == 'ok') {
Ext.MessageBox.show({
title: '系統提示資訊',
msg: '添加成功!',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.INFO,
fn: function(btn, text){
}
});
}
else {
Ext.Msg.alert('添加錯誤', action.result.msg);
}
},
//送出失敗的回調函數
failure: function(){
Ext.Msg.alert('錯誤', '伺服器出現錯誤請稍後再試！');
}
});
}
}
}, {
text: '重置',
handler: function(){
simple.form.reset();
}//重置表單
}, {
text: '取消',
handler: function(){
win.close();
}//重置表單
}]
});
//添加第一個fieldSet
simple.add(first_Org_fieldSet);
//菜單面闆
var panel = new Ext.Panel({
bodyStyle: 'width:100%',
autoWidth: true,
autoHeight: true,
//autoScroll: true,
renderTo: Ext.getBody(),
//
title: '',
bodyStyle: 'padding:10px;',
tbar: [{
xtype: 'tbseparator'
}, newDept_action, { // <-- Add the action directly to a toolbar
xtype: 'tbseparator'
}],
items: [simple]
});
// return panel;
simple.render(document.body);
});
最後要感謝熊熊之家的部落格：http://hi.baidu.com/freshman0502/blog/item/dba3a1d3742d13d8a9ec9ae7.html