`
Fangrn
  • 浏览: 818159 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

效果:


 

  • 大小: 17.5 KB
分享到:
评论
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  
老兄,可否告知你的这段代码怎么使用呢?

相关推荐

    类似于163邮箱的附件上传

    在开发Web应用时,我们经常需要实现类似163邮箱的附件上传和下载功能。这个功能不仅涉及到用户界面的设计,还包括后端服务器处理文件、存储和传输等技术。以下是一些关键知识点的详细说明: 1. **前端上传组件**: ...

    SWFUpload在asp.net中的应用(类似于163邮箱的附件上传)

    在ASP.NET环境中,SWFUpload可以提供类似163邮箱的高级附件上传体验,支持预览、进度条显示以及批量上传等特性。 首先,我们要理解SWFUpload的工作原理。它利用Flash技术绕过浏览器的同源策略限制,可以在后台无...

    利用swfupload仿163邮箱添加附件所有源码 下载即可用

    【163邮箱附件上传特性】 163邮箱的附件上传功能以其简洁易用而著名,其中的亮点包括: 1. **实时文件大小显示**:在选择文件后,系统会立即显示选定文件的总大小,帮助用户了解上传的文件是否超过邮件附件的限制...

    仿163附件上传asp.net源码

    这个源码演示了如何在ASP.NET环境中集成SwfUpload,实现类似163邮箱的文件上传功能。 1. **ASP.NET Web开发**:ASP.NET提供了多种开发模式,如Web Forms、MVC、Web API等,这里可能采用的是Web Forms,因为它更适合...

    ASP.NET多附件上传和附件编辑的实现

    在本教程中,我们将探讨如何在ASP.NET中实现多附件上传和附件编辑的功能,同时考虑客户端的编辑操作以及如何标记附件以便进行删除。 一、多附件上传 1. HTML表单设计:首先,我们需要创建一个HTML表单,包含多个...

    struts 附件上传 仿照163样式 实例

    在"struts 附件上传 仿照163样式 实例"中,我们主要探讨的是如何使用 Struts 框架来实现在Web应用中上传附件的功能,并且在界面上模仿163邮箱的风格。 首先,了解Struts的上传组件。在Struts1中,通常使用`org....

    仿163邮箱的上传代码

    在ASP.NET(C#)开发中,创建一个类似163邮箱的文件上传功能是一项常见的任务。这个"仿163邮箱的上传代码"示例旨在实现一个无刷新的多文件上传功能,允许用户一次性上传三个文件。无刷新技术通常通过AJAX实现,提供更...

    asp.net(ajax技术)163网页邮箱

    总的来说,ASP.NET AJAX技术为开发高效、交互性强的Web应用提供了强大的工具,而“asp.net(ajax技术)163网页邮箱”项目则是一个实际应用场景,涵盖了新邮件提醒和单附件上传等功能,为学习和掌握这些技术提供了...

    java extjs 仿163邮箱源码

    这个"java extjs 仿163邮箱源码"项目显然旨在模仿163邮箱的前端功能,利用这两种技术来实现一个类似的功能丰富的邮件系统。下面我们将深入探讨这两个技术以及如何在实际应用中结合它们。 **Java** Java是一种面向...

    Visual C++程序开发范例宝典(光盘) 第四部分

    Visual C++程序开发范例宝典配套光盘,因大小受限,所以分成8部分上传,必须全部下载才能正常解压! 第1章 窗体与界面设计 1.1 菜单应用实例 实例001 在系统菜单中添加菜单项 实例002 带图标的程序菜单 实例003...

    Visual C++程序开发范例宝典(光盘) 第八部分

    Visual C++程序开发范例宝典配套光盘,因大小受限,所以分成8部分上传,必须全部下载才能正常解压! 第1章 窗体与界面设计 1.1 菜单应用实例 实例001 在系统菜单中添加菜单项 实例002 带图标的程序菜单 实例003...

    《程序天下:JavaScript实例自学手册》光盘源码

    19.6 上传控件内容清空 19.7 textarea显示记事本文件的内容 19.8 使用FSO读写文本文件 19.9 自动启动文件下载 19.10 创建Excel文件 19.11 JavaScript导出数据到Excel 19.12 JavaScript读取自身文件内的XML 19.13 将...

    程序天下:JavaScript实例自学手册

    19.6 上传控件内容清空 19.7 textarea显示记事本文件的内容 19.8 使用FSO读写文本文件 19.9 自动启动文件下载 19.10 创建Excel文件 19.11 JavaScript导出数据到Excel 19.12 JavaScript读取自身文件内的XML 19.13 将...

    Visual C++ 程序开发范例宝典 源码 光盘 part2

    cc实例161 判断文件是否被改动 第6章 操作系统与Windows相关程序 6.1 启动相关设置 cc实例 162 进入WindowscXP前发出警告 cc实例163 实现关机.c重启计算机 cc实例164 将程序设置成为开机自动执行的程序 ...

    Visual C++程序开发范例宝典(PDF扫描版).part3

     cc实例163 实现关机.c重启计算机   cc实例164 将程序设置成为开机自动执行的程序   6.2 磁盘相关设置   cc实例165 判断驱动器属性   cc实例166 获取磁盘空间信息   cc实例167 获取磁盘序列号   ...

    Visual C++程序开发范例宝典(PDF扫描版).part2

     cc实例163 实现关机.c重启计算机   cc实例164 将程序设置成为开机自动执行的程序   6.2 磁盘相关设置   cc实例165 判断驱动器属性   cc实例166 获取磁盘空间信息   cc实例167 获取磁盘序列号   ...

Global site tag (gtag.js) - Google Analytics