Plot Mgr amelioration : redmine #5724

Elena.Budnik
1 parent bec49ccf
Showing 6 changed files with 35 additions and 29 deletions Show diff stats
js/app/controllers/PlotModule.js
js/app/views/IntervalUI.js
js/app/views/PlotComponents/PlotTabContent.js
js/app/views/PlotComponents/PlotTabPanel.js
js/app/views/PlotUI.js
js/app/views/TimeSelectorUI.js
@@ -32,8 +32,8 @@ Ext.define(&#39;amdaDesktop.PlotModule&#39;, {
      * @cfg {String} window definitions
      * @required
      */
-    width: 600, 
-    height: 620,
+    width: 650, 
+    height: 670,
     uiType : 'newPanelPlot',
     helpTitle : 'Help on Plot Module',
     helpFile : 'plotHelp',
@@ -205,6 +205,7 @@ Ext.define(&#39;amdaUI.IntervalUI&#39;, {
 			layout: {type: 'hbox', align: 'middle'},
 			items: [{
 				xtype: 'datefield',
+				margin : '10 0 0 5', // (top, right, bottom, left).
 				name: fieldName,
 				emptyText: 'YYYY/MM/DD hh:mm:ss',
 				tip: 'Date formated as YYYY/MM/DD hh:mm:ss',
@@ -254,7 +255,7 @@ Ext.define(&#39;amdaUI.IntervalUI&#39;, {
 				hideTrigger: true,
 				labelAlign: 'left',
 				width: 32,
-				margin: '0 5 0 0',
+				margin : '0 0 0 5',
 				listeners: {
 					change: function(field, newValue, oldValue) {
 						var form = this.findParentByType('form').getForm();
@@ -67,11 +67,12 @@ Ext.define(&#39;amdaPlotComp.PlotTabContent&#39;, {
 		this.plotElementPanel = config.plotElementPanel;
 		this.plotTabPanel = config.plotTabPanel;
  
-		this.timeSelector = new amdaUI.TimeSelectorUI( { id: 'plotTimeSelectorTab' + config.tabId, flex: 2, hidden: true} );
-		this.treePlot = new amdaPlotComp.PlotTree({flex: 3, plotElementPanel: this.plotElementPanel, plotTabContent: this});
+		this.timeSelector = new amdaUI.TimeSelectorUI( { id: 'plotTimeSelectorTab' + config.tabId, border : false, flex: 2, collapsible: true, collapseDirection : 'bottom',  hidden: true} );
+		this.treePlot = new amdaPlotComp.PlotTree({flex: 4, plotElementPanel: this.plotElementPanel, plotTabContent: this});
  
 		var myConf = {
-				bodyStyle: { background : '#dfe8f6' },  
+				bodyStyle: { background : '#dfe8f6' },
+				border : false,
 				defaults: {
 					border: false
 				},
@@ -124,11 +124,11 @@ Ext.define(&#39;amdaPlotComp.PlotTabPanel&#39;, {
  
 		var myConf = {
 				plain: true,
-				bodyStyle: { background : '#dfe8f6' },  
+				bodyStyle: { background : '#dfe8f6' },
+				border : false,
 				defaults: {
 					border: false
-				},
-				
+				},	
 				tabBar:{
 					items:[
 					       {
@@ -145,7 +145,8 @@ Ext.define(&#39;amdaUI.PlotUI&#39;, {
      */
     updateObject : function(){
     	var timeSource = this.timeSelector.getActiveTimeSource();
-    	var multiPlotForm = this.multiPlotIntervalPanel.getForm();
+    //	var multiPlotForm = this.multiPlotIntervalPanel.getForm();
+		var multiPlotForm = this.timeSelector.getForm();
     	multiPlotForm.updateRecord(this.object);
     	this.object.set('timesrc', timeSource);
     	if (timeSource === amdaModel.AmdaTimeObject.inputTimeSrc[0])
@@ -183,17 +184,18 @@ Ext.define(&#39;amdaUI.PlotUI&#39;, {
 	},
  
     updateLinkedToMultiPlotMode : function(isLinkedToMultiPlotMode) {
-		this.multiPlotIntervalPanel.setVisible(isLinkedToMultiPlotMode);
+	//	this.multiPlotIntervalPanel.setVisible(isLinkedToMultiPlotMode);
+		this.timeSelector.setVisible(isLinkedToMultiPlotMode); 
 	},
  
 	init : function(config) {
-		this.timeSelector = new amdaUI.TimeSelectorUI( { id: 'multiPlotTimeSelector' + config.id, title : 'MultiPlot Time Selection'} );
+		this.timeSelector = new amdaUI.TimeSelectorUI( { id: 'multiPlotTimeSelector' + config.id, title : 'MultiPlot Time Selection', border : false, collapsible : true, collapseDirection : 'bottom', visible : false, flex: 2 } );
  
-		this.plotOutput = new amdaPlotComp.PlotOutputForm({flex: 2});
+		this.plotOutput = new amdaPlotComp.PlotOutputForm({flex: 2, collapseDirection : 'bottom', collapsible : true });
  
-		this.plotElement = new amdaPlotComp.PlotElementPanel({flex: 3});
+		this.plotElement = new amdaPlotComp.PlotElementPanel({flex: 4});
  
-		this.plotTabs = new amdaPlotComp.PlotTabPanel({flex: 3, plotElementPanel : this.plotElement, plotUI : this});
+		this.plotTabs = new amdaPlotComp.PlotTabPanel({flex: 4, plotElementPanel : this.plotElement, plotUI : this});
  
 		this.optionsPanel = new Ext.form.Panel({
 			layout: {
@@ -211,18 +213,19 @@ Ext.define(&#39;amdaUI.PlotUI&#39;, {
 			]
 		});
  
-		this.multiPlotIntervalPanel = new Ext.form.Panel({
-			flex: 2,
-			layout: 'fit',
-			bodyStyle: { background : '#dfe8f6' },
-			visible : false,
-			defaults: {
-				border: false
-			},
-			items : [
-			         this.timeSelector
-			]
-		});
+// 		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',
@@ -250,7 +253,7 @@ Ext.define(&#39;amdaUI.PlotUI&#39;, {
 						flex: 1,
 						items: [
 	        				this.plotTabs,
-	        				this.multiPlotIntervalPanel
+	        				this.timeSelector // this.multiPlotIntervalPanel
 	        			]
 					},
 			        {
@@ -10,7 +10,7 @@
  */
  
 Ext.define('amdaUI.TimeSelectorUI', {
-	extend: 'Ext.form.FieldSet',
+	extend: 'Ext.form.Panel',
  
 	requires : [ 'amdaUI.IntervalUI' ],
  
@@ -197,6 +197,7 @@ Ext.define(&#39;amdaUI.TimeSelectorUI&#39;, {
 		{
 			title: (!this.title) ? 'Time Selection' : this.title,
 			layout: 'fit',
+			bodyStyle: { background : '#dfe8f6' },
 			items: [ this.timeSrc ]
 		};