Merge branch 'upgrade-save-plot-requests' into 'master'

Upgrade save plot requests See merge request !33

Merge branch 'upgrade-save-plot-requests' into 'master'
Upgrade save plot requests See merge request !33
Elena Budnik
2 parents 218521cf b70f8264
Showing 14 changed files with 304 additions and 199 deletions Show diff stats
help/MinMaxThreshold
help/VerticalLayout
help/plotSaveRequest
js/app/AmdaApp.js
js/app/models/InteractiveNode.js
js/app/models/PlotNode.js
js/app/models/PlotObjects/PlotRequestObject.js
js/app/views/CatalogUI.js
js/app/views/PlotComponents/PlotBaseSerieForm.js
js/app/views/PlotComponents/PlotSpectroForm.js
js/app/views/PlotComponents/PlotTabPanel.js
js/app/views/PlotTabResultUI.js
js/app/views/PlotUI.js
js/app/views/TimeTableUI.js
@@ -0,0 +1,5 @@
+<h3>Min/Max Thresholds</h3>
+Values out of Min/Max thresholds are not shown on the plot but this does not impact the X/Y axis range. 
+To have access to axis control you should uncheck <i>Simplified View</i> checkbox.
+<br/>
+
@@ -0,0 +1,18 @@
+<h3>Implemented Layouts</h3>
+		
+			 <i>Vertical</i> ( default ): vertical stack of panels;<br/>
+				all time panels are of the same width;<br/>
+				one XY panel in the line;<br/>
+				generic panel height (for Time and XY panel)<br/>
+				and width (for XY panel) can be defined at this level<br/><br/>
+			
+			 <i>Auto</i> : automatic layout - if possible combines<br/>
+				several XY panels at the same level;
+				only panel height can be defined (XY panel is 'square')<br/><br/>
+				
+			 <i>Manual</i> : everything is to be defined by user
+
+	<hr>           
+Two generic panel types : 'Time/Epoch' and 'XY (Scatter/Instant)';  
+<br/>
+       
 \ No newline at end of file
@@ -0,0 +1,9 @@
+<h3>Save Plot Request[s]</h3>
+You can save you plot request to use it in the next AMDA sessions. 
+Two options are possible:
+<ul>
+<li>Save current active plot tab request only (<i>All Plot Tabs</i> checkbox <b>unchecked</b>)
+<li>Save all the layout  - all the plot tabs requests  (<i>All Plot Tabs</i> checkbox <b>checked</b>)
+</ul>
+<br/>
+
@@ -268,6 +268,33 @@ Ext.define(&#39;amdaApp.AmdaApp&#39;, {
 		});
 	},
+	// add info icon; onCick AmdaHelp is shown
+	addAmdaInfo : function(help, style) {
+		if (style) {
+			help +=  '" style="' + style;
+		}
+		var html =  '<img amda_clicktip="' + help + '" src="js/resources/images/16x16/info_mini.png"'
+		return {
+			xtype: 'label',
+			html: html,
+			listeners: {
+				click: {
+					element: 'el',
+					fn: function(e,t) { 
+						var me = t,
+						text = me.getAttribute('amda_clicktip');
+						if (text) {
+							e.preventDefault();
+							AmdaAction.getInfo({name : text}, function(res,e) {
+								if (res.success) myDesktopApp.infoMsg(res.result);
+							}); 
+						}
+					}
+				}
+			}
+		};
+	},
+
 	getModules : function(){
 		var allModules = [];
@@ -279,25 +279,23 @@ Ext.define(&#39;amdaModel.InteractiveNode&#39;, {
 					//TODO do we need this commission ???
 					// fix the modifications for object
 					this.get('object').commit(); 
+
 					// if ownerTree panel is not active
-					if (this.myGetOwnerTree().ownerCt.getActiveTab()!==this.myGetOwnerTree())
-					{
+					if (this.myGetOwnerTree().ownerCt.getActiveTab()!==this.myGetOwnerTree()) {
 						// set ownerTree panel as the active tab - to enable selection of this node his ownerTree must have a view
 						this.myGetOwnerTree().ownerCt.setActiveTab(this.myGetOwnerTree());                        
 					}
 					Ext.Msg.alert('Complete', 'New object '+this.get('object').get('name')+' has been created'); 
 					// expand the contextNode
-					this.get('contextNode').expand(false, function()
-					{
+					this.get('contextNode').expand(false, function() {
 						if (!this.get('contextNode').findChild('text',this.get('text'))) {
 							// create node in tree as child of contextNode                 
 							this.get('contextNode').appendChild(this);			                  				
 						}
 						// select the new node 
 						this.myGetOwnerTree().getSelectionModel().select(this);
-						if (opt)
-						{
+						if (opt) {
 							var scope = opt.scope ? opt.scope : this;
 							if (opt.callback)
 									opt.callback.call(scope,'create');
@@ -15,20 +15,15 @@
 Ext.define('amdaModel.PlotNode', {
 	extend: 'amdaModel.ExecutableNode',
-  
-    requires: [
-    ],
-    
+
     statics: {
         nodeType: 'request' 
     },
     constructor : function(config){
-
         this.callParent(arguments);
         this.set('moduleId',myDesktopApp.dynamicModules.plot.id);
         this.set('objectDataModel','amdaPlotObj.PlotRequestObject');
-        this.set('ownerTreeId',amdaUI.ExplorerUI.OPE_TAB.TREE_ID);
         this.set('nodeType',this.self.nodeType);
     },
@@ -29,7 +29,9 @@ Ext.define(&#39;amdaPlotObj.PlotRequestObject&#39;, {
               {name: 'file-prefix', type: 'string'},
               {name: 'one-file-per-interval', type: 'boolean'},
               {name: 'last-plotted-tab', type: 'int', defaultValue: 0},
-              {name: 'last-tab-id', type: 'int', defaultValue: 0}
+              {name: 'last-tab-id', type: 'int', defaultValue: 0},
+				  {name: 'active-tab-id', type: 'int', defaultValue: 1},
+				  {name: 'all-in-one', type: 'boolean', defaultValue: false}
     ],
     hasMany: {
@@ -122,8 +124,10 @@ Ext.define(&#39;amdaPlotObj.PlotRequestObject&#39;, {
     	requestValues['one-file-per-interval'] = this.get('one-file-per-interval');
     	requestValues['last-plotted-tab'] = this.get('last-plotted-tab');
     	requestValues['name'] = this.get('name');
-    	
-    	requestValues['timesrc'] =  this.get('timesrc');       
+		requestValues['all-in-one'] =  this.get('all-in-one');
+		
+    	requestValues['timesrc'] =  this.get('timesrc'); 
+			
         // if there's at least one timeTable name into 'timeTables' collection
         if (this.get('timesrc') == amdaModel.AmdaTimeObject.inputTimeSrc[0] && this.get('timeTables') && this.get('timeTables').length){
             // get complete timeTables collection
@@ -141,22 +145,34 @@ Ext.define(&#39;amdaPlotObj.PlotRequestObject&#39;, {
             	}
             });            
         } else {
-        	requestValues['startDate'] = this.get('startDate');	
-            requestValues['stopDate'] = this.get('stopDate'); 
-            requestValues['durationDay'] = this.get('durationDay');
-            requestValues['durationHour'] = this.get('durationHour');
-            requestValues['durationMin'] = this.get('durationMin');
-            requestValues['durationSec'] = this.get('durationSec');
-        }
-    	
-    	requestValues['tabs'] = [];
-    	
-    	this.tabs().each(function (tab, index) {
-    		requestValues['tabs'][index] = tab.getJsonValues();
-    	});
-    	
-    	requestValues['last-tab-id'] = this.get('last-tab-id');
+				requestValues['startDate'] = this.get('startDate');	
+				requestValues['stopDate'] = this.get('stopDate'); 
+				requestValues['durationDay'] = this.get('durationDay');
+				requestValues['durationHour'] = this.get('durationHour');
+				requestValues['durationMin'] = this.get('durationMin');
+				requestValues['durationSec'] = this.get('durationSec');
+			}
-        return requestValues;
+		requestValues['tabs'] = [];
+		
+		if (this.get('all-in-one')) {
+			this.tabs().each(function (tab, index) {
+				requestValues['tabs'][index] = tab.getJsonValues();
+			});
+			
+			requestValues['active-tab-id'] = this.get('active-tab-id');
+			requestValues['last-tab-id'] = this.get('last-tab-id');
+		}
+		else {
+			var tab = this.tabs().getAt(this.get('active-tab-id')-1);
+			requestValues['tabs'][0] = tab.getJsonValues();
+			
+			requestValues['tabs'][0]['id'] = "1";
+			requestValues['active-tab-id'] = "1";
+			requestValues['last-tab-id'] = "1";
+			requestValues['last-plotted-tab'] = "0";
+		}
+		
+      return requestValues;
     }
 });
 \ No newline at end of file
@@ -113,7 +113,7 @@ Ext.define(&#39;amdaUI.CatalogUI&#39;, {
 			columns[0] = Ext.create('Ext.grid.column.RowNumberer', { width: 50,
 								renderer: function(value, metaData, record){
-									var msg = record.index;
+									var msg = record.index + 1;
 									if (record.get('isNew') || record.get('isModified')) {
 										msg += ' *';
 										metaData.style = 'font-weight: bold'
@@ -90,12 +90,13 @@ Ext.define(&#39;amdaPlotComp.PlotBaseSerieForm&#39;, {
 		    	me.object.set('serie-yaxis', value);
 		    	me.crtTree.refresh();
 		    }),
+			 myDesktopApp.addAmdaInfo('MinMaxThreshold','vertical-align:bottom'),
 		    this.addStandardFieldSet('Min/Max thresholds', '', this.getValuesRangeItems()),
 		    this.addStandardParamDropTarget('serie-colored-param', 'Colored Parameter'),
 		    this.addStandardFieldSet('Lines', 'serie-lines-activated', this.addStandardLineItems('serie-lines')),
 		    this.addStandardFieldSet('Symbols', 'serie-symbols-activated', this.addStandardSymbolsItems('serie-symbols')),
 		    this.addStandardFieldSet('Time ticks', 'serie-timetick-activated', this.getTimeTickItems()),
-			this.addStandardFieldSet('Interval ticks', 'serie-intervaltick-activated', this.getIntervalTickItems())
+			 this.addStandardFieldSet('Interval ticks', 'serie-intervaltick-activated', this.getIntervalTickItems())
 		];
 	}
 });
@@ -18,22 +18,23 @@ Ext.define(&#39;amdaPlotComp.PlotSpectroForm&#39;, {
 	getValuesRangeItems: function() {
 		return [
-		        this.addStandardFloat2('spectro-value-min', 'Min value', -Number.MAX_VALUE, Number.MAX_VALUE, true),
-		        this.addStandardFloat2('spectro-value-max', 'Max value', -Number.MAX_VALUE, Number.MAX_VALUE, true)
+					this.addStandardFloat2('spectro-value-min', 'Min value', -Number.MAX_VALUE, Number.MAX_VALUE, true),
+					this.addStandardFloat2('spectro-value-max', 'Max value', -Number.MAX_VALUE, Number.MAX_VALUE, true)
 		];
 	},
 	getFormItems: function() {
 		var me = this;
 		return [
-		    this.addStandardCombo('spectro-yaxis', 'Y axis', amdaPlotObj.PlotObjectConfig.availableYAxes, function(name, value, oldValue) {
-		    	me.object.set('spectro-yaxis', value);
-        		me.crtTree.refresh();
-		    }),
-		    this.addStandardFieldSet('Min/Max thresholds', '', this.getValuesRangeItems()),
-		    this.addStandardCheck('spectro-log0-as-min', 'Show 0 values as Min Values in log scale', function(name, value, oldValue) {
-			me.object.set('spectro-log0-as-min', value);
-		    })
+			this.addStandardCombo('spectro-yaxis', 'Y axis', amdaPlotObj.PlotObjectConfig.availableYAxes, function(name, value, oldValue) {
+				me.object.set('spectro-yaxis', value);
+				me.crtTree.refresh();
+			}),
+			myDesktopApp.addAmdaInfo('MinMaxThreshold','vertical-align:bottom'),
+			this.addStandardFieldSet('Min/Max thresholds', '', this.getValuesRangeItems()),
+			this.addStandardCheck('spectro-log0-as-min', 'Show 0 values as Min Values in log scale', function(name, value, oldValue) {
+				me.object.set('spectro-log0-as-min', value);
+			})
 		];
 	}
 });
@@ -33,10 +33,14 @@ Ext.define(&#39;amdaPlotComp.PlotTabPanel&#39;, {
 	{
 		this.object = object;
 		this.removeAll();
-		var isFirstTab = true;
-		this.object.tabs().each(function (rec) {
-			this.addPlotTab(rec, isFirstTab);
-			isFirstTab = false;
+		var selectedTab = this.object.get('active-tab-id');
+
+		this.object.tabs().each(function (rec, index) {
+			var isSelected = false;
+			if (index+1 == selectedTab) 
+				isSelected = true;
+
+			this.addPlotTab(rec, isSelected); 	
 		}, this);
 	},
@@ -313,7 +313,8 @@ Ext.define(&#39;amdaUI.PlotTabResultUI&#39;, {
 				me.contextualMenu.add([
 					{
-						text:'Extend/Shift Time request',
+						text:'Extend/Shift Time interval',
+						disabled : me.isTTNavBar,
 						handler : function ()
 						{
 							var extendShiftPlugin = this.getPlugin('plot-extendshift-plugin-id');
@@ -32,6 +32,8 @@ Ext.define(&#39;amdaUI.PlotUI&#39;, {
 	plotElement : null,
+	allPlots : false,
+	
 	constructor: function(config) {
 		this.init(config);	    
 		this.callParent(arguments);
@@ -45,88 +47,81 @@ Ext.define(&#39;amdaUI.PlotUI&#39;, {
 		this.plotTabs.setRequestObject(this.object);
 		this.timeSelector.intervalSel.setInterval(this.object.get('startDate'), this.object.get('stopDate'));
 		this.addTTs(this.object.get('timeTables'));
+		this.updateRequestOption(this.object.get('all-in-one'));
 	},
-	saveProcess : function() {
-		var plotModule = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.plot.id);
-    	if (!plotModule)
-    		return;
-    	
-    	this.updateObject();
-    	
-    	if ((this.object.get('id') != '') && (plotModule.linkedNode.get('text') == this.object.get('name')))
-			//update existing request
-			plotModule.linkedNode.update();
-    	else
-    	{
-    		var me = this;
-    		//Request Name validation
-    		plotModule.linkedNode.isValidName(this.object.get('name'), function (res) {
-    			if (!res)
-    			{
-    				myDesktopApp.errorMsg('Error during object validation');
-    				return;
-    			}
-			  
-    			if (!res.valid)
-    			{
-    				if (res.error)
-    					myDesktopApp.errorMsg(res.error);
-    				else
-    					myDesktopApp.errorMsg('Invalid object name');
-    				return;
-    			}
-			 
-    			//Save
-    			if (me.object.get('id') != '')
-    			{
-    				//Duplicate request
-    				plotModule.createLinkedNode();
-    				plotModule.linkedNode.set('object',me.object);
-    			}
-    			else
-    			{
-    				//Create new request
-    			}
-    			plotModule.linkedNode.create();
-    		});
-    	}
+	updateRequestOption : function(allInOne) {
+		var requestOptionCB = this.formPanel.getForm().findField('all-in-one');
+		requestOptionCB.setValue(allInOne);
+	},
+	
+	/**
+	 * overwrite metod called by Save button
+	 */
+	overwriteProcess : function(btn)
+	{	
+		if (btn == 'cancel') return;	
+  
+		this.saveProcess(true);		
 	},
+	
+	
+	/**
+	 * save method called by Save button to launch the save process
+	 */
+	saveProcess : function(toRename) { 
+		var plotModule = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.plot.id);
+		if (!plotModule)
+							return;
+			           
+			if (toRename) {
+				plotModule.linkedNode.set('object',this.object);
+				plotModule.linkedNode.update();
+			}
+			else {
+				//Save
+				if (this.object.get('id') != '') {
+					//Duplicate request
+					plotModule.createLinkedNode();
+					plotModule.linkedNode.set('object',this.object);
+				}
+				plotModule.linkedNode.create();
+			}
+	}, 
-    resetProcess : function(){
-    	var plotModule = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.plot.id);			
+	resetProcess : function(){
+		var plotModule = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.plot.id);			
 		plotModule.createLinkedNode();
 		plotModule.createObject();					  
 		this.setObject(plotModule.linkedNode.get('object'));
-    },
+	},
-    getDataProcess : function(){
+	getDataProcess : function(){
 		this.updateObject(); 
 		// plot was not called - form only		
-		if (this.object.get('last-plotted-tab') == 0)
-		{			
+		if (this.object.get('last-plotted-tab') == 0) {
 			this.object.set('last-plotted-tab', this.plotTabs.getSelectedTabId());
 		}
-    	var downObject = amdaModel.DownloadNode.decodeObject(this.object);		
-    	amdaModel.DownloadNode.set('object',Ext.create('amdaModel.Download',downObject));		 
-    	amdaModel.DownloadNode.editInModule(); 
-    },
+		var downObject = amdaModel.DownloadNode.decodeObject(this.object);		
+		amdaModel.DownloadNode.set('object',Ext.create('amdaModel.Download',downObject));		 
+		amdaModel.DownloadNode.editInModule(); 
+	},
-    addParameter : function(node){
-    	var crtTree = this.plotTabs.getTreeFromPlotTab(this.plotTabs.getActiveTab());
-    	crtTree.dropRecord(node,null,'append');
-    },
+	addParameter : function(node){
+		var crtTree = this.plotTabs.getTreeFromPlotTab(this.plotTabs.getActiveTab());
+		crtTree.dropRecord(node,null,'append');
+	},
 	/**
      * plot method called by 'Do Plot' button to launch the plot process
      */
-    doPlot : function(){
-    	this.updateObject();
-    	this.object.set('last-plotted-tab', this.plotTabs.getSelectedTabId());
-    	var plotModule = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.plot.id);
-    	if (plotModule)
-    		plotModule.linkedNode.execute();
-    },  
+	doPlot : function(){
+		this.updateObject();
+		this.object.set('last-plotted-tab', this.plotTabs.getSelectedTabId());
+		var plotModule = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.plot.id);
+		if (plotModule)
+			plotModule.linkedNode.execute();
+	},  
 	/**
 	 * Check if changes were made before closing window 
@@ -140,19 +135,19 @@ Ext.define(&#39;amdaUI.PlotUI&#39;, {
 		return this.object.isDirty();
 	},
-    /**
-     * update this.object from form
-     */
-    updateObject : function(){
-    	var timeSource = this.timeSelector.getActiveTimeSource();
-    //	var multiPlotForm = this.multiPlotIntervalPanel.getForm();
+	/**
+	* update time selector of this.object from form
+	*/
+	updateObject : function(){
+		var timeSource = this.timeSelector.getActiveTimeSource();
+
 		var multiPlotForm = this.timeSelector.getForm();
-    	multiPlotForm.updateRecord(this.object);
-    	this.object.set('timesrc', timeSource);
-    	if (timeSource === amdaModel.AmdaTimeObject.inputTimeSrc[0])
-        	this.object.set('timeTables',this.timeSelector.TTGrid.getStore().data.items);
-    	this.plotTabs.updateTimeObject();
-    },
+		multiPlotForm.updateRecord(this.object);
+		this.object.set('timesrc', timeSource);
+		if (timeSource === amdaModel.AmdaTimeObject.inputTimeSrc[0])
+			this.object.set('timeTables',this.timeSelector.TTGrid.getStore().data.items);
+		this.plotTabs.updateTimeObject();
+	},
 	addTT : function(newTTName,newTTid,timeSelectorId) {
 		var crtTimeSelector = Ext.getCmp(timeSelectorId);
@@ -183,8 +178,7 @@ Ext.define(&#39;amdaUI.PlotUI&#39;, {
 		this.timeSelector.intervalSel.setInterval(dateStart, dateStop);        
 	},
-    updateLinkedToMultiPlotMode : function(isLinkedToMultiPlotMode) {
-	//	this.multiPlotIntervalPanel.setVisible(isLinkedToMultiPlotMode);
+	updateLinkedToMultiPlotMode : function(isLinkedToMultiPlotMode) {
 		this.timeSelector.setVisible(isLinkedToMultiPlotMode); 
 	},
@@ -213,20 +207,6 @@ Ext.define(&#39;amdaUI.PlotUI&#39;, {
 			]
 		});
-// 		this.multiPlotIntervalPanel = new Ext.form.Panel({
-// 			flex: 2,
-// 			layout: 'fit',
-// 			bodyStyle: { background : '#dfe8f6' },
-// 			visible : false,
-// 			collapsible : true,
-// 			defaults: {
-// 				border: false
-// 			},
-// 			items : [
-// 			         this.timeSelector
-// 			]
-// 		});
-		
 		this.formPanel = new Ext.form.Panel({
 			region: 'center',
 			layout: {
@@ -269,66 +249,116 @@ Ext.define(&#39;amdaUI.PlotUI&#39;, {
 			            ]
 			        }
 			],
-			fbar: [
-			       {
-			    	   xtype: 'button',
-			    	   text: 'Plot',
-			    	   scope: this,
-			    	   handler: function(button) {
-			    		   this.doPlot();
-			    	   }
-			       },
-			       ' ',
-			       {
-			    	   xtype: 'button',
-			    	   text: 'Get Data',
-			    	   scope: this,
-			    	   handler: function(button) {
-			    		   this.getDataProcess();
-			    	   }
-			       },
-			       ' ',
-			       {
-			    	   xtype: 'button',
-			    	   text: 'Reset',
-			    	   scope: this,
-			    	   handler: function(button) {
-			    		   this.resetProcess();
-			    	   }
-			       },
-			       '->',
-			       {
-			    	   xtype: 'button',
-			    	   text: 'Save Request',
-			    	   scope: this,
-			    	   handler: function(button) {
-			    		   this.saveProcess();
-			    	   }
-			       }
+			fbar: [{
+						xtype: 'button',
+						text: 'Plot',
+						scope: this,
+						handler: function(button) {
+							this.doPlot();
+						}
+					},' ', {
+						xtype: 'button',
+						text: 'Get Data',
+						scope: this,
+						handler: function(button) {
+							this.getDataProcess();
+						}
+					},' ', {
+						xtype: 'button',
+						text: 'Reset',
+						scope: this,
+						handler: function(button) {
+							this.resetProcess();
+						}
+					},
+					'->', '-', {
+						xtype: 'button',
+						text: 'Save Request',
+						scope: this,
+						handler: function(button) {
+							var plotModule = myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.plot.id);
+							if (!plotModule)
+											return;
+							
+							this.updateObject();
+							this.object.set('active-tab-id', this.plotTabs.getSelectedTabId());
+							this.object.set('all-in-one', this.allPlots);
+							
+							//update existing request
+							if ((this.object.get('id') != '') && 
+								(plotModule.linkedNode.get('text') == this.object.get('name'))) 
+										plotModule.linkedNode.update();
+							else {
+								var me = this; 
+								plotModule.linkedNode.isValidName(this.object.get('name'), function (res) {
+									if (!res) {
+										myDesktopApp.errorMsg('Error during object validation');
+										return;
+									}
+									if (!res.valid) {
+										if (res.error) {
+											if (res.error.search('subtree') != -1) { 
+												Ext.Msg.show( { title : 'Warning', 
+													msg: res.error + '<br/>Do you want to overwrite it?',
+													width: 300,
+													buttons: Ext.Msg.OKCANCEL,
+													icon: Ext.Msg.WARNING, 
+													fn :  me.overwriteProcess, 
+													scope : me
+												});	 
+											}
+											else {
+												myDesktopApp.errorMsg(res.error);
+											}
+										}
+										else {
+											myDesktopApp.errorMsg('Invalid object name');
+										}
+										
+										return;
+									}
+									me.saveProcess(false);
+								})
+							}
+						}
+					 }, ' ', 
+						myDesktopApp.addAmdaInfo('plotSaveRequest'),
+						' ', {
+						xtype: 'checkbox',
+						boxLabel: 'All Plot Tabs',
+						name : 'all-in-one',
+						listeners : {
+							scope: this,
+							change: function (cb, nv, ov) { 
+									 this.allPlots = nv;
+							}
+						}
+					} 
 			]
 		});
-		
+
 		var myConf = {
-				layout: 'border',
-				items: [
-				        this.formPanel,
-				        {
-				        	xtype: 'panel', 
-				        	region: 'south',
-				        	title: 'Information',
-				        	collapsible: true,
-							collapseMode: 'header',
-				        	height: 100,
-				        	autoHide: false,
-				        	bodyStyle: 'padding:5px',
-				        	iconCls: 'icon-information',
-				        	loader: {
-				        		autoLoad: true,
-				        		url: helpDir+'plotHOWTO'
-				        	}
-				        }
-	            ]
+			layout: 'border',
+			items: [
+				this.formPanel,
+				{
+					xtype: 'panel', 
+					region: 'south',
+					title: 'Information',
+					collapsible: true,
+					collapseMode: 'header',
+					height: 100,
+					autoHide: false,
+					bodyStyle: 'padding:5px',
+					iconCls: 'icon-information',
+					loader: {
+						autoLoad: true,
+						url: helpDir+'plotHOWTO'
+					}
+				}
+			]
 		};
-		Ext.apply (this , Ext.apply (arguments, myConf));
+		
+		Ext.apply(this, Ext.apply(arguments, myConf));
 	}
 });
@@ -454,7 +454,7 @@ Ext.define(&#39;amdaUI.TimeTableUI&#39;, {
                 	xtype: 'rownumberer',
                 	width: 50,
                 	renderer: function(value, metaData, record, row, col, store, gridView){
-                		var msg = record.index;
+                		var msg = record.index + 1;
                 		if (record.get('isNew') || record.get('isModified'))
                 		{
                 			msg += ' *';