Sencha/ExtJs: How to clear the store and update a paging toolbar?

A small post on a problem encountred with EXTJS 4.0.2. I have a GridPanel with a paging toolbar. This grid is loaded with store (ajax, server; json…etc). And the paging toolbar allows the navigation in all pages with each time, a automatical ajax request is done from client’s store to server. During these exchanges, (at each request) the parameters ‘page’, ‘start’ and ‘limit’ are also automaticaly sent in order to delimit the scope of data to get for the grid. More, there is a simple search form which must reload the store, grid and paging toolbar with a new request to server containing the new params filled by the user.

Here the code of the “search” button’s handler which merges the previous params with the new params filled by the user and load the store (ajax request from store to server):

{
	xtype: 'button',
	id: 'documentListSearchPanelViewSearchButtonID',
	text: 'Search'
	,handler: function() {
			var form = this.up('form').getForm();
	
			[...]	
			<!-- GridPanel -->
			var gridPanelInCurrentTabTemp = [...];

			<!-- Loading STORE	-->
			var storeGridPanelInCurrentTabTemp = Ext.getCmp(gridPanelInCurrentTabTemp.id).getStore();

			<!-- Merge the previous extraparams with the new params filled by the user	-->
			var extraParamsPrevious = storeGridPanelInCurrentTabTemp.proxy.extraParams;
			storeGridPanelInCurrentTabTemp.proxy.extraParams = Ext.Object.merge(extraParamsPrevious, form.getValues());

			storeGridPanelInCurrentTabTemp.load(
				{
				 	callback: function(documents, options, success){
						if (success == false) { // Timeout 
							Ext.MessageBox.alert('alert', 'timeout');
						}
					}
	    		}
			);
	}
}

A piece of Store codes:

Ext.define(huo.store.myHuoStore', {
    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: 'huo.model.MyHuoModel'
    ,proxy: {
        type: 'ajax',

        api: {
            // get data from server
            read: 'myRemoteAjaxService.do?action=getMeAll'
        },
		params:{
			start:0,
			limit:50
		},
[...]
}

This is a normal case, nothing is special.

In server side, we print in console all parameters received with the simple below code (java code):

Map params = request.getParameterMap();
System.out.println("----- NEW REQUEST -------");
for (Iterator<String> iterator = params.keySet().iterator(); iterator.hasNext();) {
	String key = (String) iterator.next();
	//
	String str = " ";
	for (int i = 0; i < request.getParameterValues(key).length; i++) {
		str = str + request.getParameterValues(key)[i];
	}
	System.out.println("key="+key+" - value="+str);
	//
}

Scenario of problem:
1. First the request to load the grid, from the store (OK):

----- NEW REQUEST -------
key=limit - value= 50
key=page - value= 1
key=start - value= 0
...

2. We change the page of grid so a new request is sent to load the grid, from the store (OK):
The ‘start’ param has the value 100 because we want the data from the page 3 => (3-1)x50 =100; (page 1=> start=0, page 2=> start=’50’..etc).

----- NEW REQUEST -------
key=limit - value= 50
key=page - value= 3
key=start - value= 100

3. There is a problem if the user uses the search form a new resquest is sent from store to server (NOK):

----- NEW REQUEST -------
key=limit - value= 50
key=page - value= 3
key=start - value= 100

The store/grid is loaded however the params are not initialized, and the previous values are sent to server.
More the paging toolbar is not updated too.

The code of store’s loading was:

storeGridPanelInCurrentTabTemp.load(
				{
				 	callback: function(documents, options, success){
						if (success == false) { // Timeout 
							Ext.MessageBox.alert('alert', 'timeout');
						}
					}
	    		}
			);

Conclusion
My investigations/tests have led to that:

• the ‘overriding’ of params during the load doesn’t work:

  store.load({
  	params:{
  		page: 1,
  		start: 0,
  		limit: 50
  	},
  	extraParams={
  		param1:value,
  		param2:value
  	},
  	callback: function(documents, options, success){
  		if (success == false) { // Timeout 
  			Ext.MessageBox.alert('alert', 'timeout');
  		}
  	}
  });
  

• there is a solution which works by replacing the call of ‘load’ method by a call to ‘loadPage(1)’ method of store:

  store.proxy.extraParams={
  	param1:value,
  	param2:value
  }
  store.loadPage(1);
  

  … however, this solution in my case dosen’t work totally, because I need a callback on the store’s loading in order to display a timeout or confirmation message. More, as described in the Sencha forum site the Store loadPage doen’t accept a 2nd argument as stated in documentation. This bug seems be fixed in version 4.0.6!

• The FINAL solution is to set the page nuumber manually before the store loading like:

  <!--  Set the page nuumber manually -->
  storeGridPanelInCurrentTabTemp.currentPage = 1;
  storeGridPanelInCurrentTabTemp.load({
  	callback: function(documents, options, success){
  		if (success == false) { // Timeout 
  			Ext.MessageBox.alert('alert', 'timeout');
  		}
  	}
  });
  

  …and the outputs are:

  ----- NEW REQUEST -------
  key=limit - value= 500
  key=page - value= 1
  key=start - value= 0
  
  
  ----- NEW REQUEST -------
  key=limit - value= 50
  key=page - value= 3
  key=start - value= 100
  
  
  ----- NEW REQUEST -------
  key=limit - value= 50
  key=page - value= 1
  key=start - value= 0
  

That’s all! 🙂

Huseyin OZVEREN