Sencha:ExtJs: Measure processing time in web application on client side (Model, Store loadings and AJAX calls)

Hi,

Here, I would propose you a post concerning the measure of processing time in web application on client side (Model, Store loadings and AJAX calls), for example, the time between the sending of request and the receipt of response from server on client side, or the processing time for the support of server’s response on client side.

Ajax Calls
In this first part, we will measure the time processing for the Ajax request done:

• directly via the component Ext.Ajax.request:

  // Ajax request 
  Ext.Ajax.request({
  	async  : true,
  	url    : 'myCtrl.do?action=handleGetDetails',
  	method: 'GET',
  	params: {
  		docLgId:docLgId
  	},
  	success: function(response, opts) {
  		var result = Ext.JSON.decode(response.responseText);	
  		//...
  	}, 
  	failure: function() {}
  });		
  

• in a Model proxy with a type equals to ‘ajax’:

  Ext.define('myappli.model.MyModel', {
  	extend: 'Ext.data.Model',
  	
  	fields: [
  		//...
  	]
  
  	,proxy: {
  		type: 'ajax'
  		,api: {
  			read: 'myCtrl.do?action=handleGetDetails'
  		}
  		,reader: {
  			type: 'json',
  			root: 'data',
  			successProperty: 'success'
  		}
  	}
  	
  });
  
  

• in a Store proxy with a type equals to ‘ajax’:

  Ext.define('myappli.store.MyStore', {
  	extend: 'Ext.data.Store',
      
  	<!-- autoLoad : true,-->
   	autoLoad : false,
  	autoSave : false, 
  	remoteSort: true,
  	pageSize: 50
  
  	// Store to reference the Model name instead of providing fields inline, 
  	,model: 'myappli.model.MyModel'
  	,proxy: {
  		type: 'ajax',
  
  		api: {
  			// get data from server
  			read: 'myCtrl.do?action=handleGetList'
  		},
  		params:{
  			start:0,
  			limit:50
  		},
  		extraParams:{
  		},
  
  		reader: {
  			type: 'json',
  			root: 'data.documents',
  			totalProperty: 'data.totalCount',
  			idProperty: 'docLgId',
  			successProperty: 'success'
         		}
  	}
  
  	,groupField: 'name'
  	,groupDir: 'DESC'	
  });
  

The Sencha framework allows the following listeners ‘beforerequest’ and ‘requestcomplete’ on the singleton Ext.Ajax.request to intercept the Ajax requests before the sending and after the response from server.

Ext.Ajax.on('beforerequest', function(conn, response, options){ 
	var start = new Date().getTime();
	this.startTime = start;
});

Ext.Ajax.on('requestcomplete', function(conn, response, options){ 
	var end = new Date().getTime();
	this.endTime = end;
	writeInJsConsole('ajax request to:'+options.url+' with start time='+this.startTime + ' - endTime='+ this.endTime + ' -> '+ (this.endTime - this.startTime));
});

Note: The method ‘writeInJsConsole’ writes in browser console:

function writeInJsConsole (text) { 
    if (typeof console !== 'undefined') { 
        console.log(text);     
    } 
}

Limitation: As Ext.Ajax.request is a singleton, each Ajax call contained in another Ajax call, will override the start time of the container Ajax call.

Important note: The time in callbacks, for example the callback ‘success’ or ‘failure’, are not included in the above events/listeners.

Model, Store loadings
In this second part, we will measure easily the time processing after the response of server in client side. This solution consists to save the time value before the ajax or loading call, and do it again when the processing will be finished:

// In controller
var myModel = this.getModel(MyModel');

myModel.load(
	myId, // id parameter
	{
		success: function(record) {
			var start = new Date().getTime(); 

			//...

			var end = new Date().getTime(); 
			writeInJsConsole('Model load success milliseconds passed: '+(end - start));

		}
							
		,failure: function(record) {
			Ext.MessageBox.alert('alert','failure');
		}
			
		,callback: function(record) {}
   	}
);

…the code of Model could be:

Ext.define('myappli.model.MyModel', {
	extend: 'Ext.data.Model',
	
	fields: [
		//...
	]

	,proxy: {
		type: 'ajax'
		,api: {
			read: 'myCtrl.do?action=handleGetDetails'
		}
		,reader: {
			type: 'json',
			root: 'data',
			successProperty: 'success'
		}
	}
	
});

Note: The method ‘writeInJsConsole’ writes in browser console:

function writeInJsConsole (text) { 
    if (typeof console !== 'undefined') { 
        console.log(text);     
    } 
}

Best regards,

Huseyin OZVEREN