类似163邮件系统的附件上传控件
为了能够在页面中做到动态的添加和删除附件信息，着实费了不少精力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:},{columnWidth:0.22,layout:'form',items:}]});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:.attachId+'" >'+name+'</a><br/>',style:'font: normal 12px verdana,arial,tahoma;',width:300})]},{columnWidth:0.22,layout:'form',items:.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', );}, 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%'});效果：
http://dl.iteye.com/upload/attachment/157013/cbf025ad-e3ca-315b-9029-db4bd1771ef7.gif
页:
[1]