类似163邮件系统的附件上传控件

Fangrn

为了能够在页面中做到动态的添加和删除附件信息，着实费了不少精力
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.attachmentName?atts.attachmentName:atts.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.attachId+'" >'+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.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(){//重新现实attPanelExt.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%'});效果：