Use buffered scroll on granulesGrid

Nathanael Jourdane
1 parent 598754b6
Showing 2 changed files with 30 additions and 63 deletions Show diff stats
js/app/controllers/EpnTapModule.js
js/app/views/EpnTapUI.js
@@ -27,8 +27,6 @@ Ext.define(&#39;amdaDesktop.EpnTapModule&#39;, {
 	Module initialisation. Called the first time that the user open the epnTap module.
 	*/
 	init: function() {
-		this.selectedService = null;
-
 		this.launcher = {
 			text: this.title,
 			iconCls: this.icon,
@@ -63,7 +61,6 @@ Ext.define(&#39;amdaDesktop.EpnTapModule&#39;, {
 		this.granulesGrid = Ext.getCmp('epnTapGranulesGrid');
 		this.productTypeCB = Ext.getCmp('epnTapProductTypeCB');
 		this.targetNameCB = Ext.getCmp('epnTapTargetNameCB');
-		this.pagingTB = Ext.getCmp('epnTapPagingTB');
 		this.timeSelector = Ext.getCmp('epnTapTimeSelector');
 		this.getBtn = Ext.getCmp('epnTapGetBtn');
  
@@ -87,10 +84,6 @@ Ext.define(&#39;amdaDesktop.EpnTapModule&#39;, {
 			this.onServiceSelected(record);
 		}, this);
  
-		this.pagingTB.on('beforechange', function(grid, td, cellIndex, record) {
-			this.onPageChanged();
-		}, this);
-
 		this.getBtn.on('click', function() {
 			this.getServices();
 		}, this);
@@ -165,40 +158,26 @@ Ext.define(&#39;amdaDesktop.EpnTapModule&#39;, {
 		loadMask.hide();
 	},
  
-	getGranuleParams: function() {
-		return {
-			'action': 'getGranules',
-			'url': this.selectedService.data['access_url'],
-			'tableName': this.selectedService.data['table_name'],
-			'targetName': this.targetNameCB.rawValue,
-			'productTypes': this.productTypeCB.value.join(';'),
-			'timeMin': Ext.Date.format(this.timeSelector.getStartTime(), 'd/m/Y H:i:s'),
-			'timeMax': Ext.Date.format(this.timeSelector.getStopTime(), 'd/m/Y H:i:s'),
-			'nbRes': this.selectedService.get('nb_results')
-		}
-	},
-
-	onPageChanged: function() {
-		this.granulesStore.getProxy().extraParams = this.getGranuleParams();
-	},
-
 	/**
 	Trigerred when a row is clicked in `servicesGrid` table (see `EpnTapUI.createServicesGrid()`). Among other things,
 	send a new query and fill `granulesGrid`.
 	*/
 	onServiceSelected: function(record) {
+		this.servicesStore.each(function(record) {
+			record.set('selected', false);
+		}, this);
+		record.set('selected', true);
 		Ext.Ajax.suspendEvent('requestexception');
 		Ext.Ajax.abortAll();
-		this.selectedService = record;
-		var nbRes = this.selectedService.get('nb_results');
+		var nbRes = record.get('nb_results');
  
 		if(nbRes > 0 && !isNaN(nbRes)) { // TODO replace !isNaN(nbRes) by this.selectedService.get('success')
 			this.granulesStore.load({
-				params: this.getGranuleParams(),
+				params: {'action': 'getGranules'},
 				callback: function (records, operation, success) {
 					Ext.Ajax.resumeEvents('requestexception');
 					// console.log(Ext.decode(operation.response.responseText));
-				 },
+				},
 				start: 0,
 				limit: this.granulesStore.pageSize,
 				scope: this
@@ -25,7 +25,6 @@ Notes:
 in this store and an information message is displayed on the JavaScript console during the panel creation.
 - if a data product type is not present in any of the granules from the EPN-TAP services, it is not present in this
 store.
-TODO: try "var arrayStore = Ext.create(...);"
 */
 Ext.create('Ext.data.Store', {
 	storeId: 'productTypesStore',
@@ -49,8 +48,6 @@ Ext.create(&#39;Ext.data.Store&#39;, {
 	]
 });
  
-// TODO: Create a generic epntap stop from which all other stores inherits.
-
 /**
 `targetNamesStore`: An ExtJS Store containing the list of the different target names defined on all granules, on
 all available EPN-TAP services (defined in `generic_data/EpnTapData/metadata.json`, updated periodically with a cron
@@ -112,7 +109,7 @@ Ext.create(&#39;Ext.data.Store&#39;, {
 		{name: 'updated', type: 'date', dateFormat: 'c'},
 		{name: 'nb_results', type: 'integer'},
 		{name: 'info', type: 'string'},
-		{name: 'error', type: 'string'}
+		{name: 'selected', type: 'boolean'}
 	],
 	proxy: {
 		type: 'ajax',
@@ -150,16 +147,32 @@ selected.
 Ext.create('Ext.data.Store', {
 	storeId: 'granulesStore',
 	model: 'granulesModel', // Created dynamically
+	buffered: true,
+	leadingBufferZone: 50,
 	autoload: false,
-	pageSize: 25,
+	pageSize: 50,
 	proxy: {
 		type: 'ajax',
 		url: 'php/epntap.php',
-		reader: {
-			type: 'json',
-			root: 'data'
-		}
+		reader: { type: 'json', root: 'data'},
 	}, listeners: {
+		'beforeprefetch': function(store, operation) {
+			var servicesStore = Ext.data.StoreManager.lookup('servicesStore');
+			var service = servicesStore.getAt(servicesStore.findExact('selected', true)).data;
+			store.getProxy().extraParams = {
+				'action': 'getGranules',
+				'url': service['access_url'],
+				'tableName': service['table_name'],
+				'targetName': Ext.getCmp('epnTapTargetNameCB').rawValue,
+				'productTypes': Ext.getCmp('epnTapProductTypeCB').value.join(';'),
+				'timeMin': Ext.Date.format(Ext.getCmp('epnTapTimeSelector').getStartTime(), 'd/m/Y H:i:s'),
+				'timeMax': Ext.Date.format(Ext.getCmp('epnTapTimeSelector').getStopTime(), 'd/m/Y H:i:s'),
+				'nbRes': service['nb_results']
+			};
+		},
+		'prefetch': function(store, records, successful, operation) {
+			console.log('(prefetch) operation ' + (successful ? 'success' : 'failed') + ': ', operation);
+		},
 		'metachange': function(store, meta) {
 			Ext.getCmp('epnTapGranulesGrid').reconfigure(store, meta.columns);
 		}
@@ -611,7 +624,6 @@ Ext.define(&#39;amdaUI.EpnTapUI&#39;, {
 	- currently only the granule thumbnail, in full size.
  
 	A click on a granule triggers `EpnTapModule.onGranuleSelected()`.
-	TODO: infinite scroll! http://docs.sencha.com/extjs/4.2.3/extjs-build/examples/grid/infinite-scroll-with-filter.html
 	*/
 	createGranulesGrid: function() {
 		return {
@@ -620,31 +632,7 @@ Ext.define(&#39;amdaUI.EpnTapUI&#39;, {
 			title: 'Granules',
 			store: Ext.data.StoreManager.lookup('granulesStore'),
 			flex: 4,
-			columns: [],
-			dockedItems: [{
-				xtype: 'pagingtoolbar',
-				id: 'epnTapPagingTB',
-				store: Ext.data.StoreManager.lookup('granulesStore'),
-				dock: 'bottom',
-				displayInfo: true,
-				items: [{
-					xtype: 'tbseparator'
-				}, {
-					xtype: 'numberfield',
-					id: 'epnTapRowsPerPageNf',
-					fieldLabel: 'Rows per page',
-					labelWidth: 78,
-					width: 150,
-					value: Ext.data.StoreManager.lookup('granulesStore').pageSize,
-					minValue: 1,
-					maxValue: 2000,
-					listeners: {
-						change: function(newValue, oldValue) {
-							Ext.data.StoreManager.lookup('granulesStore').pageSize = newValue;
-						}
-					}
-				}]
-			}]
+			columns: []
 		};
 	}
 });