日期:2014-05-16  浏览次数:20375 次

ExtJs多个附件框实现方法

var applyFormPanel = new Beidasoft.Bap.FormPanel({
?title : '申请信息',
?loadDataServiceUrl : applyPanel_ServiceUrl,
?submitServiceUrl : 'ReleasePlanApplyFormR/saveReleaseApply',
?//region :'north',
?height : 400,
?border : false,
?baseCls : 'x-panel',
?bodyStyle:'overflow-x:hidden;',
?autoScroll : true,
?fileUpload: true,
?labelWidth : 95,
?width : '100%',
?frame : true,
?items : [{
??xtype:'panel',
??layout:'column',
??labelWidth:95,
??border:false,
??items : [{
???columnWidth:.975,
???xtype:'panel',
???layout:'form',
???items : [fieldSet = new Ext.form.FieldSet({
????title: '文件',
????fieldLabel:'附件',
????id : 'file',
????autoHeight: true,
????defaultType: 'textfield',
????anchor:'98%',
????defaultType:'displayfield',
????autoScroll:true,
????labelWidth:10
???})]
??}, addFileButton = new Ext.Button({
???text:'添加',
???id : 'addFileButton',
???tabIndex: 23,
???iconCls:'page_add',
???handler : function() {
????var number = fileNumber.getValue();
????var fileName = 'file_'+number;
????fileNumber.setValue(parseInt(number)+1);
????var lText = '<a href="#" onclick="deleteInput(\''+fileName+'\')">×</a>&nbsp;&nbsp;';
????fieldSet.add({
?????xtype:'filefield',
?????anchor:'95%',
?????id:fileName,
?????nameValue:fileName,
?????leftText:lText,
?????allowBlank : false,
?????blankText : '附件不能为空'
????});
????fieldSet.doLayout();
???}
??})]?
?}, {
??xtype:'panel',
??layout:'form',
??defaultType:'textfield',
??items:[fileNumber = new Ext.form.Field({
???inputType:'hidden',
???id : 'fileNumber',
???name:'fileNumber',
???value:0
??}), fileDelete = new Ext.form.Field({
???inputType:'hidden',
???name:'fileDelete'
??})]
?}, {
??xtype:'hidden',
??fieldLabel : '发布的任务ID',
??id : 'taskID',
??name : 'taskID',
??anchor : '99%'
?}, {
??xtype: 'hidden',
??fieldLabel : '当前的申请的recordId',
??id : 'recordId',
??name : 'recordId',
??anchor : '90%'
?}]
});


applyFormPanel.on('loaddata', function(r) {
?fieldSet.removeAll();
?// 增加下载文件的链接
?var text = r.responseText.replace(/\n\r/g ,'');
??? var data = eval('(' + text + ')');
??? if(!data.files) return;
??? for(var i = 0 ; i < data.files.length; i++){
??? ?var item = data.files[i];
??? ?var file = eval('(' + item.file + ')');? // 存放文件信息的对象
??? ?// 下载地址
??? ?var link = '/domain/downloadfileajax.cmd?fileid='+file.id;
??? ?var ahref = "<a href='"+link+"'>"+file.text+"</a>";
??? ?// 删除链接
??? ?var ref = "<a href='#' onclick='deleteFile(\""+file.id+"\")'>×</a>";
??? ?ref += "&nbsp;&nbsp;&nbsp;&nbsp;"+ahref;
??? ?fieldSet.add({id:file.id,value: ref});? //加入的对象中,id为其file.id
??? }
???
??? fieldSet.doLayout();
});

//删除附件方法
function deleteInput(id) {
?fieldSet.remove(id);
?var num = Ext.getCmp('fileNumber').getValue();
?Ext.getCmp('fileNumber').setValue(parseInt(num)-1);
}

function deleteFile(id) {
?var v = fileDelete.getValue();
?if (v != '') {
??v += ',';
?}
?v += id;
?fileDelete.setValue(v);? // 记录删除的文件id
?fieldSet.remove(id);? // 在fieldSet中删除该条记录
}