added auto, manual sampling definition for all formats, cleaned up code extjs

Elena.Budnik
1 parent a5c6d5eb
Showing 3 changed files with 303 additions and 291 deletions Show diff stats
js/app/controllers/UploadModule.js
js/app/views/UploadPanelUI.js
js/app/views/UploadUI.js
@@ -20,8 +20,8 @@ Ext.define(&#39;amdaDesktop.UploadModule&#39;, {
 	* @cfg {String} window definitions
 	* @required
 	*/
-	width: 320, 
-	height: 510,
+	width: 330, 
+	height: 520,
 	uiType : 'panelTabUpload',
 	helpTitle : 'Help on Upload Module',
 	helpFile : 'uploadHelp',
@@ -15,15 +15,16 @@ Ext.define(&#39;amdaUI.UploadPanelUI&#39;, {
 	requires : [
 		'amdaUI.RemoteSearchPlugin'
 	],
-        
-	isFile : true,
-	isTimeTable : false,
-	tmpNode : null,
+	tmpNode : null,
+	specialItems : null,
+	formats : null,
+	localName : null,
+	
 	constructor: function(config) 
 	{  
 		this.init(config);
-		this.callParent(arguments);  		        
+		this.callParent(arguments);
 	},
 	/*
@@ -39,8 +40,7 @@ Ext.define(&#39;amdaUI.UploadPanelUI&#39;, {
 			var me = this;
 			myDesktopApp.getLoadedModule(this.tmpNode.get('moduleId'), true, function (module){
 				// myData
-				if (me.tmpNode.get('nodeType') == amdaModel.MyDataParamNode.nodeType) 
-				{		       
+				if (me.tmpNode.get('nodeType') == amdaModel.MyDataParamNode.nodeType) {		       
 					var linkedFile = Ext.create('amdaModel.MyDataNode', {leaf : true, text : me.tmpNode.get('text')});
 					linkedFile.create(result.mask, result.description, result.maskDesc);
@@ -53,37 +53,33 @@ Ext.define(&#39;amdaUI.UploadPanelUI&#39;, {
 					linkedFile.set('object',paramObj);
 					me.tmpNode.set('fileObject',paramObj);
 				}
-				else 
-				{
+				else {
 					// Time Table or Catalog
 					var paramObj = Ext.create(me.tmpNode.get('objectDataModel'), result);
 					paramObj.set('fromPlugin',true);
-					if (result.intervals) 
-					{
+					if (result.intervals) {
 						paramObj.set('intervals',result.intervals);
 						paramObj.set('nbIntervals',result.intervals.length);
 					}
 					me.tmpNode.set('object',paramObj);
 				}	
-				if (module)
-				{
+				if (module) {
 					module.setLinkedNode(me.tmpNode); 	      
 					module.linkedNode.editInModule();  
 				}
 			}); 
 		} 
-		else 
-		{	   
+		else {   
 			// EXCEPTION : parameter not found !
 			myDesktopApp.errorMsg(t.action + "." + t.method + " : No parameter '"+this.tmpNode.get('text')+"' found!");	     
 		}
+		
 		loadMask.hide();
 	},
 /*
 *  form validation
-*  TODO markInvalid()?
 */
 	validate : function() 
 	{
@@ -91,59 +87,43 @@ Ext.define(&#39;amdaUI.UploadPanelUI&#39;, {
 		if (values['filesrc'] == 'LOCAL') 
 		{
-			if (this.isFile) var locFile = this.getForm().findField('localFileName').getValue();
-			else if (this.isTimeTable) var locFile = this.getForm().findField('localTTName').getValue();
-			else var locFile = this.getForm().findField('localCatName').getValue();
-													 	
-			if (!locFile) 
-			{
+			var locFile = this.getForm().findField(this.localName).getValue();
+
+			if (!locFile) {
 				myDesktopApp.warningMsg("Select File to Upload");
 				return false;
 			}
 		}
 		else 
 		{
-			if (!values['remoteFile'] && !values['remoteTT'] && !values['remoteCat']) 
-			{
+			if (!values['remoteFile'] && !values['remoteTT'] && !values['remoteCat']) {
 				myDesktopApp.warningMsg("Select File to Upload");
 				return false;
 			}
-		}	     	     
+		}
+		
 		return true;
 	},
-	//TODO proper parsing
+/*
+ *  Upadte format if user didn't do this himself
+ */
 	updateFormat: function(value) 
 	{    
 		var arrayOfStr = value.split('.');
-		//TODO use down method?	  
-		if (this.isFile) 
-		{
-			var radios = Ext.getCmp('filefrmt');
-			var user_format_obj = radios.getValue();	  
-			var user_format = user_format_obj.filefrmt;
-		}
-		else if (this.isTimeTable)
-		{
-			var radios = Ext.getCmp('ttfrmt');
-			var user_format_obj = radios.getValue();	  
-			var user_format = user_format_obj.ttfrmt;
-		}
-		else
-		{
-			var radios = Ext.getCmp('catfrmt');
-			var user_format_obj = radios.getValue();	  
-			var user_format = user_format_obj.catfrmt;
-		}
-					
-		var auto_format = user_format;
+
+		var radios = Ext.getCmp(this.radioId);
+		var user_format_obj = radios.getValue();
+
+		var user_format = user_format_obj[this.radioId];
 		//  auto define format in some special cases 
 		//TODO name without extention => ASCII?
-		if (arrayOfStr.length == 1) auto_format = 'ASCII'; 
-		else  
-		{
+		if (arrayOfStr.length == 1) {
+			auto_format = 'ASCII'; 
+		}
+		else  {
 			var suffix = arrayOfStr[arrayOfStr.length - 1].toLowerCase();
 			if (suffix == 'gz') 
 				suffix = arrayOfStr[arrayOfStr.length - 2].toLowerCase() + '.gz';
@@ -155,35 +135,30 @@ Ext.define(&#39;amdaUI.UploadPanelUI&#39;, {
 				case 'cef' :  auto_format = 'CEF'; break;
 				case 'xml' :  auto_format = 'VOT';
 				case 'vot' :  auto_format = 'VOT'; break;
-				case 'nc'  :  auto_format = 'NC'; break;
+				case 'nc'  :  auto_format = 'NC';  break;
 				case 'asc' :
 				case 'txt' :			 
 				default : auto_format = 'ASCII'; 			   
 			}
 		} 
 		// set auto format : case when format was not set by user before   
-		if (this.isFile && user_format !== auto_format) {
-				user_format_obj.filefrmt = auto_format;    
-		} else  if (this.isTimeTable && user_format !== auto_format) {
-				user_format_obj.ttfrmt = auto_format;
-		} else if (!this.isFile && !this.isTimeTable && user_format !== auto_format) {
-			user_format_obj.catfrmt = auto_format;
-		}
-		
+		if (user_format !== auto_format) {
+			user_format_obj[this.radioId] = auto_format;    
+		} 
+
 		radios.setValue(user_format_obj);
 	},
-	/*
-	* 
-	*/
+/*
+* 
+*/
 	forceUpload : function (url,format,onFinish)
 	{
 		var me = this;
 		var re = /http:\/\/127.0.0.1:/;
 		var isRemoteUrl = !re.test(url);
-		switch (format)
-		{
+		switch (format) {
 			case 'votable' :
 				this.getForm().findField('filefrmt').setValue('VOT');
 				break;
@@ -230,14 +205,14 @@ Ext.define(&#39;amdaUI.UploadPanelUI&#39;, {
 		this.postUpload(onFinish);
 	},
-	/*
-	* 
-	*/
+/*
+* 
+*/
 	postUpload : function(onFinish)
 	{
 		// 'global' form containing 'partial' forms				      
 		var form = this.getForm();
-		
+
 		// special validation 	            
 		if(this.validate())
 		{
@@ -246,16 +221,14 @@ Ext.define(&#39;amdaUI.UploadPanelUI&#39;, {
 				scope: this,
 				url: 'php/uploadFile.php',
 				waitMsg: 'Uploading your file...',
-				success: function(form, o)
-				{
+				success: function(form, o) {
 					if (onFinish)
 						onFinish();
 					this.tmpNode = Ext.create(this.nodeType,{leaf : true, text : o.result.file});
 					AmdaAction.getUploadedObject(o.result.file, o.result.format, this.tmpNode.get('nodeType'), this.getObjectCallback, this);
 					loadMask.hide();
 				},
-				failure: function(form, o) 
-				{
+				failure: function(form, o) {
 					if (onFinish)
 						onFinish();
 					loadMask.hide();
@@ -265,25 +238,19 @@ Ext.define(&#39;amdaUI.UploadPanelUI&#39;, {
 		}		
 	},
-	/*
-	*  panel config
-	*/
-	init : function(config) 
-	{       
-		this.isFile = config.panelType == 'file'? true : false;
-		this.isTimeTable = config.panelType == 'timetable'? true : false;
-		
-		// file / time table / catalog settings	  
-		if (this.isFile) 
-		{	    
-			var title = 'File';
-			var items = [
+	initFileUpload : function()
+	{
+		this.formats = [
 				{ boxLabel: 'ASCII', name: 'filefrmt', inputValue: 'ASCII', checked: true,
-					listeners: 
-					{
+					listeners: {
 						change: function (cb, nv, ov) {
-							if (nv) Ext.getCmp('tf').show();
-							else Ext.getCmp('tf').hide();	
+							if (nv) { 
+								Ext.getCmp('tf').show();
+							}
+							else {
+								Ext.getCmp('tf').hide();
+								Ext.getCmp('nfs').hide();
+							}
 						}
 					} 
 				}, 
@@ -291,143 +258,88 @@ Ext.define(&#39;amdaUI.UploadPanelUI&#39;, {
 				{ boxLabel: 'CDF&nbsp;<img amda_clicktip="cdfTimeFormat" style="vertical-align:bottom" src="js/resources/images/16x16/info_mini.png"', name: 'filefrmt', inputValue: 'CDF' },
 			// { boxLabel: 'CEF[GZ]', name: 'filefrmt', inputValue: 'CEF' },
 				{ boxLabel: 'VOTable', name: 'filefrmt', inputValue: 'VOT' }];
-			var timeFormatId = 'tf';
-			this.formatId = 'nsf';
+
 			this.localUploadId = 'form-uploadfile';
-			var localUploadName ='localFileName';
-			var remoteUploadName ='remoteFile';
 			this.remoteUploadId = 'form-uploadurl'; 	 
 			this.nodeType = 'amdaModel.MyDataParamNode';
 			//TODO load XML	   
-			var store = Ext.create('Ext.data.Store', {
+			this.store = Ext.create('Ext.data.Store', {
 				fields: ['value', 'name'],
 				data : [
 					{"value":"ftp://cdaweb.gsfc.nasa.gov/pub/data/", "name":"CDAWEB/FTP"}/*,		   
 					{"value":"ftp://ftp.ngdc.noaa.gov/STP/SOLAR_DATA/", "name":"Solar Data"}*/]
-			});	   
-		}
-		else if (this.isTimeTable)
-		{		
-			var title = 'Time Table';
-			var items = [
-				{ boxLabel: 'ASCII&nbsp;<img amda_clicktip="ttTimeFormat" style="vertical-align:bottom" src="js/resources/images/16x16/info_mini.png"', name: 'ttfrmt',  inputValue: 'ASCII', checked: true},
-				{ boxLabel: 'VOTable', name: 'ttfrmt', inputValue: 'VOT'}
-			];
-			var timeFormatId = 'tf_tt'; 
-			this.formatId = 'nsf_tt';
-			this.localUploadId = 'form-uploadtt';
-			var localUploadName ='localTTName';
-			var remoteUploadName ='remoteTT';
-			this.remoteUploadId = 'form-uploadtturl'; 
-			this.nodeType = 'amdaModel.TimeTableNode';
-			//TODO load XML		    
-			var store = Ext.create('Ext.data.Store', {
-					fields: ['value', 'name'],
-					data : []
 			});
-		}
-		else 
-		{
-			var title = 'Catalog';
-			var items = [
-				{ boxLabel: 'VOTable', name: 'catfrmt', inputValue: 'VOT', checked: true }];
-						
-			var timeFormatId = 'tf_cat'; 
-			this.formatId = 'nsf_cat';
-			this.localUploadId = 'form-uploadcat';
-			var localUploadName ='localCatName';
-			var remoteUploadName ='remoteCat';
-			this.remoteUploadId = 'form-uploadcaturl'; 
-			this.nodeType = 'amdaModel.CatalogNode';
-			//TODO load XML		    
-			var store = Ext.create('Ext.data.Store', {
-					fields: ['value', 'name'],
-					data : []
-			});
-		}
-		
-		var combo = Ext.create('Ext.form.ComboBox', {
-				flex : 4, 
-				store: store,
-				emptyText: 'Enter Remote Site URL (ftp)',
-				queryMode: 'local',
-				displayField: 'name',
-				valueField: 'value' 
-		});
-	    	  
-		var fieldcontainer = 
-		{ 
-			xtype: 'fieldcontainer', 
-			fieldLabel: ' ', labelWidth: 0, labelSeparator : '', labelPad : 0,
-			layout: 'hbox',		
+			this.radioId = 'filefrmt';
+
+/*
+ *  Sampling : TimeFormat Fieldset  
+ */    
+		this.autoSampling = Ext.create('Ext.form.RadioGroup', {
+		//	fieldLabel : 'Constant or Variable ?',
+		//	labelWidth: 90,
+			defaults : {name : 'timesmpl'},
 			items: [
-				combo,
-				{
-					xtype : 'button',
-					flex : 1,
-					text: 'Browse It',								   
-						handler: function()
-						{					      
-							var form = this.up('form').getForm(); 
-							var site = form.getFields().getAt(0).getValue(); 					    
-							if (site) 						   
-								this.up('form').ownerCt.fireEvent('open', site);
-							else 
-								myDesktopApp.warningMsg("Please Enter Remote Site URL");				 
-						} 
-				}]
-		};
-		
-		if (this.isFile) var radioId = 'filefrmt';
-		else if (this.isTimeTable) var radioId =	'ttfrmt';
-		else var radioId = 'catfrmt';
+				{boxLabel: 'constant sampling', inputValue: 'constant', checked: true},
+				{boxLabel: 'variable sampling&nbsp;<img amda_clicktip="variableSampling" style="vertical-align:bottom" src="js/resources/images/16x16/info_mini.png"', inputValue: 'variable'}	  
+			]
+		});
-		var fileFormat =  Ext.create('Ext.form.FieldSet', { 			      
-			title: 'File Format',			     		     
-			items : [{ 
-				xtype: 'radiogroup',
-				id : radioId, 
-				columns: 3,
-				cls: 'x-check-group-alt',
-				items: items				
+		this.manualSampling = Ext.create('Ext.form.FieldContainer', { 
+			defaultType: 'textfield',
+			layout: 'anchor',
+			defaults: {
+				layout: '100%',
+				labelWidth : 150
+			}, 
+			hidden : true,
+			items: [  
+			{ 
+				fieldLabel : 'min sampling',	
+				name : 'min_manual_sampling'   
+			},  
+			{ 
+				fieldLabel : 'max sampling',	
+				name : 'max_manual_sampling'				   
 			}]
+		}); 
+	
+		var Sampling = Ext.create('Ext.form.RadioGroup', {
+			fieldLabel: 'Time Sampling',
+			labelWidth: 90,   
+			cls: 'x-check-group-alt',	
+			defaults : {name : 'smpl'},
+			items: [
+				{boxLabel: 'auto-defined', inputValue: 'auto', checked: true},
+				{boxLabel: 'manual', inputValue: 'manual'}
+			],
+			listeners: {
+				scope : this,
+				change: function (cb, nv, ov) {
+					if (nv.smpl == 'manual') {
+							this.autoSampling.setVisible(false);
+							this.manualSampling.setVisible(true);
+					}
+					else {   
+							this.autoSampling.setVisible(true);
+							this.manualSampling.setVisible(false);
+					}
+				}
+			}
 		});
-            
-		var Sampling = 
-		{ 
-			xtype: 'radiogroup',	
-			fieldLabel: 'Time Sampling',	
-			labelWidth: 90,			  
-			cls: 'x-check-group-alt',
-			hidden : !this.isFile,
-			defaults : {name : 'timesmpl'},
-			items: [ 			
-				{boxLabel: 'constant', inputValue: 'constant', checked: true},
-				{boxLabel: 'variable&nbsp;<img amda_clicktip="variableSampling" style="vertical-align:bottom" src="js/resources/images/16x16/info_mini.png"', inputValue: 'variable'}	  
-			] 		
-		};
-	  
-		var dayStart = 
-		{ 
-			xtype: 'checkbox',  
-			name : 'doy',
-			hidden : true,
-			fieldLabel: 'DOY starts from 1',
-			inputValue: '1'
-		};
-			
-		var nonStandardFormat = 
-		{ 
+		
+/*
+ *  NonStandardFormat : TimeFormat Fieldset  
+ */
+		var nonStandardFormat = { 
 			xtype: 'fieldcontainer',
 			defaultType: 'textfield',
 			layout: 'anchor',
-			defaults: 
-			{
-					layout: '100%',
-					labelWidth : 150
+			defaults: {
+				layout: '100%',
+				labelWidth : 150 
 			}, 
-			id : this.formatId, 
+			id : 'nfs', 
 			hidden : true,
 			items: [  
 			{ 
@@ -435,8 +347,7 @@ Ext.define(&#39;amdaUI.UploadPanelUI&#39;, {
 				name : 'nonstd',				   
 				value: 'Y-m-d H:i:s',
 				enableKeyEvents: true,
-				listeners : 
-				{
+				listeners : {
 					keyUp : function() {
 						if (this.getValue().indexOf('z') > 0) {
 							this.nextSibling().show();
@@ -446,65 +357,147 @@ Ext.define(&#39;amdaUI.UploadPanelUI&#39;, {
 						}                                                 
 					}
 				}
-			},
-			dayStart,
-			{ 
-					fieldLabel : 'define max time length',
-					name : 'timelength',
-					value: 'auto'    
+			},{ 
+				xtype: 'checkbox',  
+				name : 'doy',
+				fieldLabel: 'DOY starts from 1',
+				hidden : true,
+				inputValue: '1'
+			},{ 
+				fieldLabel : 'define max time length',
+				name : 'timelength',
+				value: 'auto'    
 			}],
-			listeners : 
-			{                                        
+			listeners : {
 				hide : function() {
 						this.items.getAt(1).hide();                                                
+				},
+				show : function() {
+					if (this.items.getAt(0).getValue().indexOf('z') > 0)
+						this.items.getAt(1).show();                                                
 				}
 			}
-		};	 
-
-		var timeFormat = Ext.create('Ext.form.FieldSet', { 
-			id: timeFormatId, 
+		};
+		
+/*
+ *  TimeFormat Fieldset :  Global form
+ */
+		var timeFormat = Ext.create('Ext.form.FieldSet', {
 			title: 'Time Settings',
-			hidden : !this.isFile,
-			items : [
-			{
+			items : [{
+				id: 'tf',
 				xtype: 'radiogroup',
 				fieldLabel: 'Time Format',
 				labelWidth: 90,   
 				cls: 'x-check-group-alt',
 				defaults : { name : 'timefrmt'},
 				items: [ 
-				{ boxLabel: 'standard&nbsp;<img amda_clicktip="standardTimeFormat" style="vertical-align:bottom" src="js/resources/images/16x16/info_mini.png"', inputValue: 'standard', checked: true},     			
-				{ boxLabel: 'no&nbsp;<img amda_clicktip="userTimeFormat" style="vertical-align:bottom" src="js/resources/images/16x16/info_mini.png"', inputValue: 'user', 
-					listeners: 
-					{
-						scope : this,
-						change: function (cb, nv, ov) {
-						if (nv) 
-								Ext.getCmp(this.formatId).show();
-						else    
-								Ext.getCmp(this.formatId).hide();	
-						}
-					}      
-				}]
-			},
-			nonStandardFormat,
-			Sampling ]
+					{ boxLabel: 'standard&nbsp;<img amda_clicktip="standardTimeFormat" style="vertical-align:bottom" src="js/resources/images/16x16/info_mini.png"', inputValue: 'standard', checked: true},     			
+					{ boxLabel: 'no&nbsp;<img amda_clicktip="userTimeFormat" style="vertical-align:bottom" src="js/resources/images/16x16/info_mini.png"', inputValue: 'user', 
+						listeners: {
+							change: function (cb, nv, ov) {
+								if (nv) 
+										Ext.getCmp('nfs').show();
+								else    
+										Ext.getCmp('nfs').hide();	
+							}
+						}      
+					}]
+				},
+				nonStandardFormat,
+				Sampling,
+				this.autoSampling,
+				this.manualSampling
+			]
 		});
+		
+		this.specialItems = [ timeFormat,
+					{
+						xtype: 'hidden',
+						name: 'sampData',
+						value: null
+					},
+					{
+						xtype: 'hidden',
+						name: 'sampFileName',
+						value: null
+					}]
+	},
+	initTTUpload : function(isTT)
+	{
+		if (isTT) {
+			this.formats = [
+				{ boxLabel: 'ASCII&nbsp;<img amda_clicktip="ttTimeFormat" style="vertical-align:bottom" src="js/resources/images/16x16/info_mini.png"', name: 'ttfrmt',  inputValue: 'ASCII', checked: true},
+				{ boxLabel: 'VOTable', name: 'ttfrmt', inputValue: 'VOT'}
+			];
+			this.localUploadId = 'form-uploadtt';
+			this.remoteUploadId = 'form-uploadtturl'; 
+			this.nodeType = 'amdaModel.TimeTableNode';
+			//TODO load XML		    
+			this.store = Ext.create('Ext.data.Store', {
+					fields: ['value', 'name'],
+					data : []
+			});
+			this.radioId =	'ttfrmt';
+		}
+		else {
+			this.formats = [
+				{ boxLabel: 'VOTable', name: 'catfrmt', inputValue: 'VOT', checked: true }];
+						
+			this.localUploadId = 'form-uploadcat';
+			this.remoteUploadId = 'form-uploadcaturl'; 
+			this.nodeType = 'amdaModel.CatalogNode';
+			//TODO load XML		    
+			this.store = Ext.create('Ext.data.Store', {
+					fields: ['value', 'name'],
+					data : []
+			});
+			
+			this.radioId = 'catfrmt';
+		}
+	},
+/*
+*  panel config
+*/
+	init : function(config) 
+	{       
+		 
+		if ( config.panelType == 'file' )
+				this.initFileUpload();
+		else 
+				this.initTTUpload(config.panelType == 'timetable');
+
+		this.localName = config.localUploadName;
+ /*
+ *  FileFormat Fieldset 
+ */ 
+		var fileFormat =  Ext.create('Ext.form.FieldSet', { 			      
+			title: 'File Format',			     		     
+			items : [{ 
+				xtype: 'radiogroup',
+				id : this.radioId, 
+				columns: 3,
+				cls: 'x-check-group-alt',
+				items: this.formats
+			}]
+		}); 
+
+/*
+ * FileSource Fieldset : Local File Upload
+ */
 		var localFile = Ext.create('Ext.form.Panel', {      
 			id: this.localUploadId,
 			fileUpload: true,
 			hideLabels: true,
 			frame: true,			      
-			items: [
-			{
+			items: [{
 				xtype: 'fileuploadfield',     
 				emptyText: 'Select Your File',
 				width: 300,
-				name: localUploadName,  
+				name: this.localName,  
 				buttonText: 'Browse',
-				listeners: 
-				{
+				listeners: {
 					scope : this,
 					change: function (field, value, e) {
 							this.updateFormat(value);	
@@ -517,8 +510,41 @@ Ext.define(&#39;amdaUI.UploadPanelUI&#39;, {
 				name: 'MAX_FILE_SIZE',
 				value: myDesktopApp.MAX_UPLOADED_FILE_SIZE // 30MB	 			      
 			}] 
-		});      
-	
+		});
+		
+/*
+ * FileSource Fieldset : Remote File Upload
+ */
+		var combo = Ext.create('Ext.form.ComboBox', {
+				flex : 4, 
+				store: this.store,
+				emptyText: 'Enter Remote Site URL (ftp)',
+				queryMode: 'local',
+				displayField: 'name',
+				valueField: 'value' 
+		});
+	    	  
+		var fieldcontainer = { 
+			xtype: 'fieldcontainer', 
+			fieldLabel: ' ', labelWidth: 0, labelSeparator : '', labelPad : 0,
+			layout: 'hbox',		
+			items: [
+				combo,
+				{
+					xtype : 'button',
+					flex : 1,
+					text: 'Browse It',								   
+					handler: function() {					      
+						var form = this.up('form').getForm(); 
+						var site = form.getFields().getAt(0).getValue(); 					    
+						if (site) 						   
+							this.up('form').ownerCt.fireEvent('open', site);
+						else 
+							myDesktopApp.warningMsg("Please Enter Remote Site URL");				 
+					} 
+				}]
+		};
+		
 		var remoteFile = Ext.create('Ext.form.Panel', { 
 			id: this.remoteUploadId, 
 			hideLabels: true,
@@ -529,7 +555,7 @@ Ext.define(&#39;amdaUI.UploadPanelUI&#39;, {
 				fieldcontainer,
 				{ 
 					xtype : 'textfield',
-					name : remoteUploadName, 
+					name : config.remoteUploadName, 
 					emptyText: 'Enter Remote File URL (http or ftp)',
 					width: 310,
 					listeners: 
@@ -541,17 +567,18 @@ Ext.define(&#39;amdaUI.UploadPanelUI&#39;, {
 					}
 				}]
 		});
-                                        
+		
+ /*
+ * FileSource Fieldset  :  global form
+ */                                       
 		var uploadForm = Ext.create('Ext.form.FieldSet',{    
 			title: 'File Source',     
-			items : [
-			{ 
+			items : [{ 
 				xtype: 'radiogroup', 
 				cls: 'x-check-group-alt',
 				items: [
 					{ boxLabel: 'Local', name: 'filesrc', inputValue: 'LOCAL', checked: true,
-						listeners: 
-						{
+						listeners: {
 							scope : this,
 							change: function (cb, nv, ov) {
 								if (nv == ov) return;
@@ -568,58 +595,43 @@ Ext.define(&#39;amdaUI.UploadPanelUI&#39;, {
 							}
 						} 
 					},
-					{ boxLabel: 'URL', name: 'filesrc', inputValue: 'URL'} ]
+					{ boxLabel: 'URL', name: 'filesrc', inputValue: 'URL'}]
 			}]
 		});		      
-														
+
+/*
+ * Panel Config
+ */
 		var myConf = 
 		{
-			title : title,  
+			title : config.title,  
 			layout: {type: 'vbox', align: 'stretch'},
+			autoScroll : true,
 			bodyStyle: { background : '#dfe8f6'},
-			items : [ 
-					uploadForm,
-					localFile, 
-					remoteFile, 			     
-					fileFormat,
-					timeFormat,
-					{
-						xtype: 'hidden',
-						name: 'sampData',
-						value: null
-					},
-					{
-						xtype: 'hidden',
-						name: 'sampFileName',
-						value: null,
-					}
-			],
-			buttons: [
-			{
+			items : Ext.Array.merge(
+					[ uploadForm, localFile, remoteFile, fileFormat ],
+					this.specialItems ), 
+			buttons: [{
 				text: 'Upload',
-				handler: function()
-				{
+				handler: function() {
 					this.postUpload();
 				},
 				scope : this
 			},
 			{
 				text: 'Reset',
-				handler: function(){				      
+				handler: function() {      
 					this.up('form').getForm().reset();  
 				}
 			}], 
 			plugins: [{ptype: 'remoteSearchPlugin'}],
-			listeners:
-			{
-				click: 
-				{
+			listeners:{
+				click: {
 					element: 'el',
-					fn: function(e,t) {	 		 
+					fn: function(e,t) { 
 						var me = t,
 						text = me.getAttribute('amda_clicktip');
-						if (text) 
-						{
+						if (text) {
 							e.preventDefault();
 							AmdaAction.getInfo({name : text}, function(res,e) {					    					   
 								if (res.success) myDesktopApp.infoMsg(res.result);
@@ -33,9 +33,9 @@ Ext.define(&#39;amdaUI.UploadUI&#39;, {
 				region: 'center',  
 				activeTab : 0,   
 				items : [ 
-				{ xtype: 'panelUpload', panelType : 'file'},
-				{ xtype: 'panelUpload',  panelType : 'timetable'},
-				{ xtype: 'panelUpload',  panelType : 'catalog'}]
+				{ xtype: 'panelUpload',  panelType : 'file', title : 'File', localUploadName : 'localFileName', remoteUploadName : 'remoteFile'},
+				{ xtype: 'panelUpload',  panelType : 'timetable', title : 'Time Table', localUploadName : 'localTTName', remoteUploadName : 'remoteTT'},
+				{ xtype: 'panelUpload',  panelType : 'catalog', title : 'Catalog', localUploadName : 'localCatName', remoteUploadName :'remoteCat'}]
 			},
 			{
 				xtype: 'panel',