Fix tooltip bug.

Nathanael Jourdane
1 parent 9b951b58
Showing 1 changed file with 31 additions and 39 deletions Show diff stats
js/app/views/EpnTapUI.js
@@ -153,13 +153,16 @@ Ext.define(&#39;amdaUI.EpnTapUI&#39;, {
 		- the service name;
 		- the number of granules matching with the filter.
  
-		Other informations are available through the tooltip `serviceTooltip`.
+		Other informations are available through an ExtJS Tooltip, on each row:
+		- short name;
+		- title;
+		- access URL.
  
 		A click on a service triggers `EpnTapModule.onServiceSelected()`, which basically fills `GranulesGrid` by the
 		service granules.
 		*/
 		var createServicesGrid = function() {
-			return new Ext.grid.Panel({
+			var epnTapServicesGrid = new Ext.grid.Panel({
 				id: 'epnTapServicesGrid',
 				title: 'Services',
 				store: Ext.data.StoreManager.lookup('servicesStore'),
@@ -176,24 +179,14 @@ Ext.define(&#39;amdaUI.EpnTapUI&#39;, {
 				},
 				renderTo: Ext.getBody()
 			});
-		};
  
-		/**
-		Create `epnTapServiceTooltip`, an ExtJS tooltip for the `servicesGrid` rows, in order to display additional
-		information for each service, such as:
-			- short name;
-			- title;
-			- access URL.
-		*/
-		var createServiceTooltip = function() {
-			return new Ext.tip.ToolTip({
-				id: 'epnTapServiceTooltip',
-				target: Ext.getCmp('epnTapServicesGrid').getView().el,
-				delegate: Ext.getCmp('epnTapServicesGrid').getView().itemSelector,
+			Ext.create('Ext.tip.ToolTip', {
+				target: epnTapServicesGrid.getView().el,
+				delegate: epnTapServicesGrid.getView().itemSelector,
 				trackMouse: true,
 				listeners: {
 					beforeshow: function updateTipBody(tooltip) {
-						var service = Ext.getCmp('epnTapServicesGrid').getView().getRecord(tooltip.triggerElement);
+						var service = epnTapServicesGrid.getView().getRecord(tooltip.triggerElement);
 						var ttContent = '<h3>' + service.get('shortName') + '</h3>';
 						ttContent += '<p>' + service.get('title') + '</p>';
 						ttContent += '<p>' + service.get('accessURL') + '</p>';
@@ -202,6 +195,8 @@ Ext.define(&#39;amdaUI.EpnTapUI&#39;, {
 				},
 				renderTo: Ext.getBody()
 			});
+
+			return epnTapServicesGrid;
 		};
  
 		/**
@@ -209,19 +204,21 @@ Ext.define(&#39;amdaUI.EpnTapUI&#39;, {
 		`epnTapServiceGrid`.
  
 		For each granule, this grid displays:
-			- the row number;
-			- the dataproduct type;
-			- the target name;
-			- the min and max times;
-			- the format;
-			- the UID (granule identifier);
-			- the estimated size;
-			- the URL;
-			- the thumbnail.
+		- the row number;
+		- the dataproduct type;
+		- the target name;
+		- the min and max times;
+		- the format;
+		- the UID (granule identifier);
+		- the estimated size;
+		- the URL;
+		- the thumbnail.
  
-		For more information about these parameters, see https://voparis-confluence.obspm.fr/display/VES/EPN-TAP+V2.0+parameters.
 		Each of these information are displayed in a specific rendering to improve user experience.
-		Other informations are available through the tooltip `granuleTooltip`.
+		For more information about these parameters, see https://voparis-confluence.obspm.fr/display/VES/EPN-TAP+V2.0+parameters.
+
+		Other informations are available through an ExtJS Tooltip on each row:
+		- currently only the granule thumbnail, in full size.
  
 		A click on a granule triggers `EpnTapModule.onGranuleSelected()`.
 		*/
@@ -254,7 +251,7 @@ Ext.define(&#39;amdaUI.EpnTapUI&#39;, {
 				}
 			};
  
-			return new Ext.grid.Panel({
+			var epnTapGranulesGrid = new Ext.grid.Panel({
 				id: 'epnTapGranulesGrid',
 				title: 'Granules',
 				store: Ext.data.StoreManager.lookup('granulesStore'),
@@ -276,26 +273,21 @@ Ext.define(&#39;amdaUI.EpnTapUI&#39;, {
 				},
 				renderTo: Ext.getBody()
 			});
-		};
  
-		/**
-		Create `epnTapGranuleTooltip`, an ExtJS tooltip for the `granulesGrid` rows, in order to display additional
-		information for each granule which is currently only the granule thumbnail, in full size.
-		*/
-		var createGranuleTooltip = function() {
-			return new Ext.tip.ToolTip({
-				id: 'epnTapGranuleTooltip',
-				target: Ext.getCmp('epnTapGranulesGrid').getView().el,
-				delegate: Ext.getCmp('epnTapGranulesGrid').getView().itemSelector,
+			Ext.create('Ext.tip.ToolTip', {
+				target: epnTapGranulesGrid.getView().el,
+				delegate: epnTapGranulesGrid.getView().itemSelector,
 				trackMouse: true,
 				listeners: {
 					beforeshow: function updateTipBody(tooltip) {
-						var thumb = Ext.getCmp('epnTapGranulesGrid').getView().getRecord(tooltip.triggerElement).get('thumbnail_url');
+						var thumb = epnTapGranulesGrid.getView().getRecord(tooltip.triggerElement).get('thumbnail_url');
 						tooltip.update('<img src="' + thumb + '">');
 					}
 				},
 				renderTo: Ext.getBody()
 			});
+
+			return epnTapGranulesGrid;
 		};
  
 		/**