Results 1 to 2 of 2

Thread: UploadPanel(Extjs3.0+swfUpload)

  1. #1
    Sencha User Achilles's Avatar
    Join Date
    Oct 2008
    Location
    guangzhou, china
    Posts
    17

    Smile UploadPanel(Extjs3.0+swfUpload)





    js code:
    Code:
    var keel={};
    
    keel.UploadPanel = function(cfg){
    	this.width = 510;
    	this.height = 200;
    	Ext.apply(this,cfg);	
    	this.gp = new Ext.grid.GridPanel({
    		border :false,
    		store: new Ext.data.Store({
    			fields:['id','name','type','size','state','percent']
    		}),
    	    columns: [
    	    	new Ext.grid.RowNumberer(),
    	        {header: '???', width: 100, sortable: true,dataIndex: 'name', menuDisabled:true},
    	        {header: '??', width: 70, sortable: true,dataIndex: 'type', menuDisabled:true},
    	        {header: '??', width: 100, sortable: true,dataIndex: 'size', menuDisabled:true,renderer:this.formatFileSize},
    	        {header: '??', width: 150, sortable: true,dataIndex: 'percent', menuDisabled:true,renderer:this.formatProgressBar,scope:this},
    	        {header: '??', width: 70, sortable: true,dataIndex: 'state', menuDisabled:true,renderer:this.formatFileState,scope:this},
    	        {header: ' ',width:40,dataIndex:'id', menuDisabled:true,renderer:this.formatDelBtn}       
    	    ]			
    	});
    	this.setting = {
    		upload_url : this.uploadUrl, 
    		flash_url : this.flashUrl,
    		file_size_limit : this.fileSize || (1024*50) ,//???????????MB
    		file_post_name : this.filePostName,
    		file_types : this.fileTypes||"*.*",  //????????? 
            file_types_description : "All Files",  //??????
            file_upload_limit : "0",  //????????????????????????????????????0???????? 
            //file_queue_limit : "10",//?????????????????????file_upload_limit????              
    		post_params : this.postParams||{savePath:'upload\\'},
    		use_query_string : true,
    		debug : false,
    		button_cursor : SWFUpload.CURSOR.HAND,
    		button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,
    		custom_settings : {//?????
    			scope_handler : this
    		},
    		file_queued_handler : this.onFileQueued,
    		swfupload_loaded_handler : function(){},// ?Flash????????????????
    		file_dialog_start_handler : function(){},// ????????????????????
    		file_dialog_complete_handler : this.onDiaogComplete,//??????????????????
    		upload_start_handler : this.onUploadStart,// ????????????????
    		upload_success_handler : this.onUploadSuccess,// ???????????????? 
    		swfupload_loaded_handler : function(){},// ?Flash????????????????  
    		upload_progress_handler : this.uploadProgress,
    		upload_complete_handler : this.onUploadComplete,
    		upload_error_handler : this.onUploadError,
    		file_queue_error_handler : this.onFileError
    	};
    	keel.UploadPanel.superclass.constructor.call(this,{				
    		tbar : [
    			{text:'????',iconCls:'add',ref:'../addBtn'},'-',
    			{text:'??',ref:'../uploadBtn',iconCls:'up',handler:this.startUpload,scope:this},'-',
    			{text:'????',ref:'../stopBtn',iconCls:'delete',handler:this.stopUpload,scope:this,disabled:true},'-',
    			{text:'????',ref:'../deleteBtn',iconCls:'delete2',handler:this.deleteAll,scope:this},'-'
    		],
    		layout : 'fit',
    		items : [this.gp],
    		listeners : {
    			'afterrender':function(){
    				var em = this.getTopToolbar().get(0).el.child('em');
    				var placeHolderId = Ext.id();
    				em.setStyle({
    					position : 'relative',
    					display : 'block'
    				});
    				em.createChild({
    					tag : 'div',
    					id : placeHolderId
    				});
    				this.swfupload = new SWFUpload(Ext.apply(this.setting,{
    					button_width : em.getWidth(),
    					button_height : em.getHeight(),
    					button_placeholder_id :placeHolderId
    				}));
    				this.swfupload.uploadStopped = false;
    				Ext.get(this.swfupload.movieName).setStyle({
    					position : 'absolute',
    					top : 0,
    					left : -2
    				});				
    			},
    			scope : this,
    			delay : 100
    		}
    	});
    }
    Ext.extend(keel.UploadPanel,Ext.Panel,{
    	toggleBtn :function(bl){
    		this.addBtn.setDisabled(bl);
    		this.uploadBtn.setDisabled(bl);
    		this.deleteBtn.setDisabled(bl);
    		this.stopBtn.setDisabled(!bl);
    		this.gp.getColumnModel().setHidden(6,bl);
    	},
     	onUploadStart : function(file) {  
    	   var post_params = this.settings.post_params;  
    	   Ext.apply(post_params,{//????????
    	   		//fileName : file.name,
    	        fileName : encodeURIComponent(file.name)
    	   });  
    	   this.setPostParams(post_params);  
    	},
    	startUpload : function() {
    		if (this.swfupload) {
    			if (this.swfupload.getStats().files_queued > 0) {
    				this.swfupload.uploadStopped = false;
    				this.toggleBtn(true);
    				this.swfupload.startUpload();
    			}
    		}
    	},
    	formatFileSize : function(_v, celmeta, record) {
    		return Ext.util.Format.fileSize(_v);
    	},
    	formatFileState : function(n){//????
    		switch(n){
    			case -1 : return '???';
    			break;
    			case -2 : return '????';
    			break;
    			case -3 : return '<div style="color:red;">????</div>';
    			break;
    			case -4 : return '????';
    			break;
    			case -5 : return '????';
    			break;
    			default: return n;
    		}
    	},
    	formatProgressBar : function(v){
    		var progressBarTmp = this.getTplStr(v);
    		return progressBarTmp;
    	},
    	getTplStr : function(v){
    		var bgColor = "orange";
    	    var borderColor = "#008000";
    		return String.format(
    			'<div>'+
    				'<div style="border:1px solid {0};height:10px;width:{1}px;margin:4px 0px 1px 0px;float:left;">'+		
    					'<div style="float:left;background:{2};width:{3}%;height:10px;"><div></div></div>'+
    				'</div>'+
    			'<div style="text-align:center;float:right;width:40px;margin:3px 0px 1px 0px;height:10px;font-size:12px;">{3}%</div>'+			
    		'</div>', borderColor,(90),bgColor, v);
    	},
    	onUploadComplete : function(file) {
    		var me = this.customSettings.scope_handler;
    		if(file.filestatus==-4){
    			var ds = me.gp.store;
    			for(var i=0;i<ds.getCount();i++){
    				var record =ds.getAt(i);
    				if(record.get('id')==file.id){
    					record.set('percent', 100);
    					if(record.get('state')!=-3){
    						record.set('state', file.filestatus);
    					}
    					record.commit();
    				}
    			}
    		}
    		
    		if (this.getStats().files_queued > 0 && this.uploadStopped == false) {
    			this.startUpload();
    		}else{			
    			me.toggleBtn(false);
    			me.linkBtnEvent();
    		}		
    	},
    	onFileQueued : function(file) {
    		var me = this.customSettings.scope_handler;
    		var rec = new Ext.data.Record({
    			id : file.id,
    			name : file.name,
    			size : file.size,
    			type : file.type,
    			state : file.filestatus,
    			percent : 0
    		})
    		me.gp.getStore().add(rec);
    	},
    	onUploadSuccess : function(file, serverData) {
    		var me = this.customSettings.scope_handler;
    		var ds = me.gp.store;
    		if (Ext.util.JSON.decode(serverData).success) {			
    			for(var i=0;i<ds.getCount();i++){
    				var rec =ds.getAt(i);
    				if(rec.get('id')==file.id){
    					rec.set('state', file.filestatus);
    					rec.commit();
    				}
    			}			
    		}else{
    			for(var i=0;i<ds.getCount();i++){
    				var rec =ds.getAt(i);
    				if(rec.get('id')==file.id){
    					rec.set('percent', 0);
    					rec.set('state', -3);
    					rec.commit();
    				}
    			}
    		}
    		me.linkBtnEvent();
    	},
    	uploadProgress : function(file, bytesComplete, totalBytes){//?????
    		var me = this.customSettings.scope_handler;
    		var percent = Math.ceil((bytesComplete / totalBytes) * 100);
    		percent = percent == 100? 99 : percent;
           	var ds = me.gp.store;
    		for(var i=0;i<ds.getCount();i++){
    			var record =ds.getAt(i);
    			if(record.get('id')==file.id){
    				record.set('percent', percent);
    				record.set('state', file.filestatus);
    				record.commit();
    			}
    		}
    	},
    	onUploadError : function(file, errorCode, message) {
    		var me = this.customSettings.scope_handler;
    		me.linkBtnEvent();
    		var ds = me.gp.store;
    		for(var i=0;i<ds.getCount();i++){
    			var rec =ds.getAt(i);
    			if(rec.get('id')==file.id){
    				rec.set('percent', 0);
    				rec.set('state', file.filestatus);
    				rec.commit();
    			}
    		}
    	},
    	onFileError : function(file,n){
    		switch(n){
    			case -100 : tip('?????????????????');
    			break;
    			case -110 : tip('??????????');
    			break;
    			case -120 : tip('??????0??????');
    			break;
    			case -130 : tip('???????????');
    			break;
    		}
    		function tip(msg){
    			Ext.Msg.show({
    				title : '??',
    				msg : msg,
    				width : 280,
    				icon : Ext.Msg.WARNING,
    				buttons :Ext.Msg.OK
    			});
    		}
    	},
    	onDiaogComplete : function(){
    		var me = this.customSettings.scope_handler;
    		me.linkBtnEvent();
    	},
    	stopUpload : function() {
    		if (this.swfupload) {
    			this.swfupload.uploadStopped = true;
    			this.swfupload.stopUpload();
    		}
    	},
    	deleteAll : function(){
    		var ds = this.gp.store;
    		for(var i=0;i<ds.getCount();i++){
    			var record =ds.getAt(i);
    			var file_id = record.get('id');
    			this.swfupload.cancelUpload(file_id,false);			
    		}
    		ds.removeAll();
    		this.swfupload.uploadStopped = false;
    	},
    	formatDelBtn : function(v){
    		return "<a href='#' id='"+v+"'  style='color:blue' class='link-btn' ext:qtip='?????'>??</a>";
    	},
    	linkBtnEvent : function(){
    		Ext.select('a.link-btn',false,this.gp.el.dom).on('click',function(o,e){
    			var ds = this.gp.store;
    			for(var i=0;i<ds.getCount();i++){
    				var rec =ds.getAt(i);
    				if(rec.get('id')==e.id){
    					ds.remove(rec);
    				}
    			}			
    			this.swfupload.cancelUpload(e.id,false);
    		},this);
    	}
    });
    Ext.reg('uploadPanel',keel.UploadPanel);
    icon css:
    Code:
    .add{
        background-image: url(images/add.gif) !important;
    }
    .up{
        background-image: url(images/up.gif) !important;
    }
    
    .delete{
        background-image: url(images/delete.gif) !important;
    }
    .delete2{
        background-image: url(images/delete2.gif) !important;
    }
    example:
    Code:
    Ext.onReady(function(){
    	Ext.QuickTips.init();
    	new Ext.Window({
    		width : 650,
    		title : 'swfUpload demo',
    		height : 300,
    		layout : 'fit',
    		items : [
    			{
    				xtype:'uploadPanel',
    				border : false,
    				fileSize : 1024*50,
    				uploadUrl : 'uploadFiles.action',
    				flashUrl : 'swfupload.swf',
    				filePostName : 'file',
    				fileTypes : '*.*',
    				postParams : {savePath:'upload\\'}
    			}
    		]
    	}).show();
    });
    http://czpae86.javaeye.com/

  2. #2

    Default ????,???????????

    ?1.2???????????,???????????,????????,??????

Similar Threads

  1. SWFUpload with Extjs3.0 Component
    By yourgame2 in forum Community Discussion
    Replies: 6
    Last Post: 8 May 2013, 8:56 AM
  2. Ext.ux.UploadPanel bug?
    By danielbertini in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 14 Oct 2010, 9:32 AM
  3. UploadPanel width
    By Jose Gonzalez in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 3 Nov 2009, 7:56 AM
  4. scope question to uploadpanel of JSakalos..
    By chrizmaster in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 28 Sep 2009, 5:33 AM
  5. [3.0.rc]Problems mit UploadPanel
    By jahman in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 8 Jul 2009, 3:01 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •