类似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:[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%'
	});

效果：

 

评论

8 楼 Fangrn 2010-11-17  

File的数组

7 楼 swimmingdog 2010-11-17  

我把这个组件放到Form表单里，可是我不明白我在Struts2中，FileUploadField对应的是一个File的数组还是什么，所以恳请您如果方便的话，把Struts2的代码共享下，我刚研究ExtJs不到两周的时间，公司还急着做ExtJs的邮件系统，我现在很多东西还朦朦胧胧的，先谢谢您了!

6 楼 Fangrn 2010-11-16  

和普通的struts2的文件上传下载一样的了

5 楼 swimmingdog 2010-11-16  

您好 能否把ACTION中的方法公布一下 谢谢

4 楼 penwei 2010-07-12  

感谢楼主共享CSS

3 楼 Fangrn 2010-07-11  

.addfile{cursor:pointer!important;cursor:hand;left:-24px}
.addfile{width:80px;height:18px;position:absolute;top:0px;left:-5px;left:-3px;opacity:0;filter:alpha(opacity=0)}*:lang(zh)
.attach-icon{background-image:url(../images/attach.png)!important;}

.x-form-file-wrap {
    position: relative;
    height: 22px;
}
.x-form-file-wrap .x-form-file {
position: absolute;
/*right: 300;*/
left:0;
-moz-opacity: 0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
    height: 22px;
}
.x-form-file-wrap .x-form-file-btn {
position: absolute;
/*right: 300;*/
left:0;
z-index: 1;
}
.x-form-file-wrap .x-form-file-text {
    position: absolute;
    left: 0;
    z-index: 3;
    color: #777;
}

2 楼 Fangrn 2010-03-25  

呵呵，上边已经将使用代码贴出来了的
注意两个方法：setParams(),reloadContractFiles()

1 楼 cmliu2004 2010-03-24  

老兄，可否告知你的这段代码怎么使用呢？