diff --git a/js/app/views/EpnTapUI.js b/js/app/views/EpnTapUI.js index fa94e61..feb6db5 100644 --- a/js/app/views/EpnTapUI.js +++ b/js/app/views/EpnTapUI.js @@ -153,13 +153,16 @@ Ext.define('amdaUI.EpnTapUI', { - 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('amdaUI.EpnTapUI', { }, 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 = '
' + service.get('title') + '
'; ttContent += '' + service.get('accessURL') + '
'; @@ -202,6 +195,8 @@ Ext.define('amdaUI.EpnTapUI', { }, renderTo: Ext.getBody() }); + + return epnTapServicesGrid; }; /** @@ -209,19 +204,21 @@ Ext.define('amdaUI.EpnTapUI', { `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('amdaUI.EpnTapUI', { } }; - 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('amdaUI.EpnTapUI', { }, 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(''); } }, renderTo: Ext.getBody() }); + + return epnTapGranulesGrid; }; /** -- libgit2 0.21.2