为了能够在页面中做到动态的添加和删除附件信息，着实费了不少精力
Fairies.form.FileUploadField = Ext.extend(Ext.form.TextField,{
isDisable:false,//是否被Disable,则删除按钮不能使用
buttonText:'选择文件...',
buttonOnly:true,
buttonOffset:3,
readOnly:true,
isToRemind:true,//是否提醒
autoSize:Ext.emptyFn,
initComponent:function(){
Fairies.form.FileUploadField.superclass.initComponent.call(this);
this.addEvents(
'fileselected'
);
},
onRender:function(ct, position){
Fairies.form.FileUploadField.superclass.onRender.call(this, ct, position);
this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap',id:Ext.id()});
this.wrap.parent().dom.setAttribute('id',Ext.id());
this.el.addClass('x-form-file-text');
this.el.dom.removeAttribute('name');
this.fileInput = this.wrap.createChild({
id:Ext.id(),name:this.name||this.getId(),cls:'x-form-file addfile',tag:'input',type:'file',size:1,style:'left:2px;cursor:hand;'});
var btnCfg = Ext.applyIf(this.buttonCfg||{}, {
text: this.buttonText
});
this.button = new Ext.Button(Ext.apply(btnCfg, {iconCls:'attach-icon',
renderTo: this.wrap,disabled:this.isDisable//,minWidth:100
}));
this.msg_e=this.wrap.createChild({id:Ext.id(),style:'position:absolute;top:0px;left:130;'});
this.msg_p=new Ext.Panel({renderTo:this.msg_e,border:false,width:380,border:false});
if(this.buttonOnly){
this.el.hide();
this.wrap.setWidth(this.button.getEl().getWidth());
}
this.fileInput.on('change', function(){
var v = this.fileInput.dom.value;
this.setValue(v);this.addMsg(v);
this.fireEvent('fileselected',this,v);
},this);
},
addMsg:function(v){
var p=new Ext.Panel({bodyStyle:'padding:0px 0px 3px 3px',border:false,layout:'table',items:[
{columnWidth:0.78,layout:'form',items:[new Ext.form.Label({html:v,style:'font: normal 12px verdana,arial,tahoma;',width:300})]}
,{columnWidth:0.22,layout:'form',items:[new Ext.Button({text:'删除',tooltip:'删除文件',iconCls:'icon-delete',disabled:this.isDisable,listeners:{'click':function(t,e){
p.destroy();this.msg_p.remove(p);this.msg_p.doLayout(true);this.setHeight(this.msg_p.getInnerHeight());
},'mouseover':function(t,e){
t.getEl().parent().parent().parent().parent().parent().first().highlight();
},scope:this}})]}
]});
this.msg_p.insert(0,p);
this.msg_p.doLayout(true);
p.getEl().appendChild(this.fileInput);
this.fileInput.hide(true);
this.fileInput.setStyle('display','none');
this.fileInput = this.wrap.createChild({id: Ext.id(),name: this.name||this.getId(),cls: 'x-form-file',tag: 'input',type: 'file',size: 1});
this.fileInput.on('change', function(){
var v = this.fileInput.dom.value;
this.setValue(v);this.addMsg(v);
this.fireEvent('fileselected', this, v);
}, this);
this.wrap.insertFirst(this.fileInput);
this.msg_p.doLayout(true);
this.setHeight(this.msg_p.getInnerHeight());
},
showFiles:function(atts){
//展示下载的链接：atts 必须包括attachId and attachmentName,atts是一个数组 ；url是下载的连接 ,such as 'HQ/downloadAttachment.action'
this.msg_p.destroy();
this.msg_p=new Ext.Panel({renderTo:this.msg_e,border:false,width:380});
/*for(i=0;i<this.msg_p.getSize();i++){
this.msg_p.remove(this.msg_p.getComponent(i));
}*/
for(i=0;i<atts.length;i++){
var name = atts[i].attachmentName?atts[i].attachmentName:atts[i].attachName;
var p=new Ext.Panel({bodyStyle:'padding:0px 0px 0px 0px',border:false,layout:'table',items:[
{columnWidth:0.78,layout:'form',items:[new Ext.form.Label({html:'<a href="'+this.url+'?id='+atts[i].attachId+'" onclick="javascript:window.unload=false; return '+(this.isToRemind?'download()':'true')+'">'+name+'</a><br/>',style:'font: normal 12px verdana,arial,tahoma;',width:300})]},
{columnWidth:0.22,layout:'form',items:[new Ext.Button({text:'删除',tooltip:'删除文件',disabled:this.isDisable,delId:atts[i].attachId,iconCls:'icon-delete',listeners:{'click':function(t,e){
Ext.Msg.show({title:'提示：',
closable:false,
msg:'您确定要删除您指定的文件吗?选择”是“将永久删除该文件。',
buttons: Ext.Msg.YESNO,
fn:function(btn){
if(btn=='yes'){
//如果没有提交到后台的文件则直接删除,否则提交到后台执行删除
Ext.lib.Ajax.request('POST', 'HQ/removeAttachements.action?AJAX.REQUEST=true', {
success:function(request) {
var message = request.responseText;
var p_=Ext.getCmp(t.getEl().parent().parent().parent().parent().parent().parent().parent().parent().parent().parent().id);
p_.destroy();
this.msg_p.remove(p_);this.msg_p.doLayout(true);
},
failure : function(request){
Fairies.form.MessageBox(Ext.decode(request.responseText));
},scope:this
},'&ids='+t.delId);
}
},
icon: Ext.MessageBox.QUESTION,scope:this
});
},'mouseover':function(t,e){
t.getEl().parent().parent().parent().parent().parent().first().highlight();
},scope:this}})]}
]});
this.msg_p.insert(0,p);
this.msg_p.doLayout(true);
this.setHeight(this.msg_p.getInnerHeight());
}
},
setParams:function(obj){
this.url = obj.url;
this.docType = obj.docType;
this.mydocId = obj.mydocId;
this.storeUrl = obj.storeUrl;
},
reloadFiles:function(){//重新现实attPanel
Ext.Ajax.request({
url:'HQ/getAllAttachments.action',
params:{docId:this.mydocId, docType:this.docType,start:0,limit:10000},
success:function(request){
var message =request.responseText;//这里可以获取服务器返回的数据内容
var res = Ext.decode(message);
var atts=res.result;
if(!atts){
atts = res.data;
}
this.showFiles(atts);
},
failure:function(){
Ext.Msg.alert("网络出现错误");
},scope:this
});
},
reloadContractFiles:function(){
Ext.Ajax.request({
url: this.storeUrl,
params:{docId:this.mydocId, docType:this.docType, start:0,limit:10000},
success:function(request){
var message =request.responseText;//这里可以获取服务器返回的数据内容
var res = Ext.decode(message);
var atts = res.result;
this.showFiles(atts);
},
failure:function(){
Ext.Msg.alert("网络出现错误");
},scope:this
});
},
setPContainer:function(pcontainer){
this.pcontainer = pcontainer;
},
onResize : function(w, h){
h=h||this.msg_p.getInnerHeight();
Ext.form.FileUploadField.superclass.onResize.call(this, w, h);
this.wrap.setSize(w,h);
if(!this.buttonOnly){
var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset;
this.el.setWidth(w);
}
},
preFocus:Ext.emptyFn,
getResizeEl:function(){return this.wrap;},
getPositionEl:function(){return this.wrap;},
alignErrorIcon:function(){this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);},
setDisabled:function(b){//设置控件是否可用
this.isDisable=true;
if (b){
this.button.disable();
this.fileInput.setStyle('display','none');
if (this.msg_p.items){
for(var j=0;j<this.msg_p.items.length;j++)
this.msg_p.items.get(j).items.get(1).items.get(0).disable();
}
}else{
this.button.enable();
this.fileInput.setStyle('display','');
if (this.msg_p.items){
for(var j=0;j<this.msg_p.items.length;j++)
this.msg_p.items.get(j).items.get(1).items.get(0).enable();
}
}
}
});
Ext.reg('uxfileuploadfield', Fairies.form.FileUploadField);
调用方法：
var attPanel = new Fairies.form.FileUploadField({
fieldLabel:'文件附件',
name:'attachements',id:'attachmentManageId',anchor:'87%'
});
效果：