ExtJs 动态添加表单

Ext.namespace("ExtFile.ui");
// Form
ExtFile.ui.importFormPanel = function() {
var myConfig = {};
Ext.apply(myConfig, {
labelAlign : 'right',
frame : false,
fileUpload : true,
bodyStyle : 'padding:10px;',
title : '基本信息导入',
autoScroll :true,
height:400,
items : [{
layout : 'form',
border : false,
bodyStyle : 'padding: 12px 10px 0 10px;',
items : [{
items : [{
id : 'com00',
layout : 'column',
items : [{
columnWidth : .05,
layout : 'form',
border : false,
labelWidth : 2,
bodyStyle : 'padding: 10px 22px;',
items : [{
text : '',
iconCls : 'plus',
xtype : 'button',
handler : this.addField.createDelegate(
this, [])
}]
}, {
columnWidth : .05,
layout : 'form',
border : false,
bodyStyle : 'padding: 10px 3px;',
labelWidth : 2,
items : [{
text : '',
iconCls : 'subtraction',
xtype : 'button',
handler : this.removeField.createDelegate(
this, ['00'])
}]
}, {
columnWidth : .7,
layout : 'form',
labelWidth : 200,
border : false,
bodyStyle : 'padding: 10px 10px;',
items : [{
xtype : "textfield",
fieldLabel : '请选择文件(.xls文件) ',
name : 'file',
allowBlank : false,
width : 400,
blankText : '导入文件不能为空',
inputType : 'file'
}, {
xtype : 'hidden',
name : 'ad_itemId00'
}]
}]
}]
}]
},{
columnWidth : .7,
layout : 'form',
labelWidth : 200,
border : false,
bodyStyle : 'padding: 10px 10px;',
html:'您导入的文件不能超过7条，以免出现等待很长时间，请您慎重上传，谢谢！'
}],
buttons : [{
text : '导入文件',
border : false,
bodyStyle : 'padding: 10px 10px 0 10px;',
handler : this.importBase.createDelegate(this, [])
}, {
text : '下载模板',
handler : this.onDownload.createDelegate(this, [])
}]
});
ExtFile.ui.importFormPanel.superclass.constructor.call(this, myConfig);
};
Ext.extend(ExtFile.ui.importFormPanel, Ext.FormPanel, {
index : 10,
// 移除字段
removeField : function(name) {
this.index = this.index - 1;
var comp = this.getComponent(0).getComponent(0);
if (comp.items.getCount() <= 1) {
Ext.MessageBox.alert('温馨提示', '至少保留一项数据项！');
return;
}
if (comp != null) {
var removeArray = Ext.getCmp('com' + name)
.findByType('hidden');
// 点击删除按钮后，保存其ID
// this.getComponent(0).add({
// xtype : 'hidden',
// name : 'removeId',
// value : removeArray[0].value
// });
comp.remove(Ext.getCmp('com' + name));
};
this.doLayout(true);
},
addField : function(itemId, itemTitle, itemContent, itemClassId) {
//this.index++;
if(this.index >= 16){
HM.MsgUtils.alert('警告', '您添加的文件不能超过7条', null,
null, 'warn', 0, false, 230);
return;
}
// alert(this.index+">>"+name);
var comp = this.getComponent(0).getComponent(0);
var panel = new Ext.Panel({
autoScroll :true,
id : 'com' + this.index,
layout : 'column',
items : [{
columnWidth : .05,
layout : 'form',
border : false,
labelWidth : 2,
bodyStyle : 'padding: 10px 22px;',
items : [{
text : '',
iconCls : 'plus',
xtype : 'button',
handler : this.addField.createDelegate(
this, [])
}]
}, {
columnWidth : .05,
layout : 'form',
border : false,
labelWidth : 2,
bodyStyle : 'padding: 10px 3px;',
items : [{
text : '',
iconCls : 'subtraction',
xtype : 'button',
handler : this.removeField.createDelegate(
this, [this.index++])
}]
}, {
columnWidth : .7,
layout : 'form',
labelWidth : 200,
border : false,
bodyStyle : 'padding: 10px 10px;',
items : [{
xtype : "textfield",
fieldLabel : '请选择文件(.xls文件) ',
name : 'file',
width : 400,
allowBlank : false,
blankText : '导入文件不能为空',
inputType : 'file'
}/*, {
xtype : 'hidden',
value : itemId,
name : 'ad_itemId' + this.index
}*/]
}]
});
comp.add(panel);
this.doLayout(true);
return panel;
},
importBase : function() {
var permitted_extensions = ["xls"];// 定义文件的后缀名
var temp;
var panel = this.getComponent(0).getComponent(0);
var textfields = panel.findByType('textfield');
for (var i = 0; i < textfields.length; i++) {
if (textfields[i].getValue() == '') {
HM.MsgUtils.alert('警告', '您导入文件不能为空，请选择后保存！', null,
null, 'warn', 0, false, 230);
return;
}
if (permitted_extensions.length > 0) {
var result = null;
var parts = textfields[i].getValue().split(".");
if (parts.length > 1) {
result = parts.pop();
}
if ((permitted_extensions.indexOf(result) != -1) == false) {
HM.MsgUtils.alert('警告', '您上传的格式不正确，请您上传以[.'
+ permitted_extensions + ']格式！',
null, null, 'warn', 0, false, 230);
return;
}
}
}
// 保存
var url = Ext.template.root
+ '/baseInfo/sec_importOrgInfo.action';
this.getForm().submit({
timeout : 120000,
waitTitle : '请稍候',
waitMsg : '正在保存数据,请您耐心等候...',
url : url,
isUpload : true,
enctype : 'multipart/form-data',
scope : this,
method : 'post',
success : function(form, action) {
Ext.MessageBox.hide();
if (action.result.id || action.result.info != "") {
this.getForm().reset();
HM.MsgUtils.alert('提示', '保存成功!', null, null,
'info', 0, false);
this.getForm().getEl().dom.reset();// 清空file文本框的值
if (this.index > 10) {
var t = this.index-10;
for(var i=0;i<t;i++){
this.removeField(this.index-1);
}
}
} else {
location = 'data.jsp';
}
},
failure : function(form, action) {
Ext.MessageBox.hide();
HM.MsgUtils.alert('错误', action.result
action.result.message
: '导入失败!', null, null, 'error', 0,
false);
}
});
},
// 下载
onDownload : function() {
document.location.href = Ext.template.root
+ '/baseInfo/sec_downFile.action';
// html : "<a href='"+
// Ext.template.root+"/main/sysFile_downFile.action?id="+fileId+"'
// target=_self>"+fileName+"</a>"
// alert('下载模板');
}
});

importFormPanel.rar (2.4 KB)
下载次数: 182

查看图片附件

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。