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):

A piece of Store codes:

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):

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

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).

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

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:

Conclusion
My investigations/tests have led to that:

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

  print?

  01	store.load({

  02

  params:{

  03

  page: 1,

  04

  start: 0,

  05

  limit: 50

  06

  },

  07	extraParams={

  08	param1:value,

  09	param2:value

  10

  },

  11	callback: function(documents, options, success){

  12	if (success == false) { // Timeout

  13	Ext.MessageBox.alert('alert', 'timeout');

  14

  }

  15

  }

  16

  });

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

  print?

  1	store.proxy.extraParams={

  2	param1:value,

  3	param2:value

  4

  }

  5	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:
  view source

  print?

  1	<!--  Set the page nuumber manually -->

  2	storeGridPanelInCurrentTabTemp.currentPage = 1;

  3	storeGridPanelInCurrentTabTemp.load({

  4	callback: function(documents, options, success){

  5	if (success == false) { // Timeout

  6	Ext.MessageBox.alert('alert', 'timeout');

  7

  }

  8

  }

  9

  });

  …and the outputs are:

  view source

  print?

  01	----- NEW REQUEST -------

  02	key=limit - value= 500

  03	key=page - value= 1

  04	key=start - value= 0

  05

  06

  07	----- NEW REQUEST -------

  08	key=limit - value= 50

  09	key=page - value= 3

  10	key=start - value= 100

  11

  12

  13	----- NEW REQUEST -------

  14	key=limit - value= 50

  15	key=page - value= 1

  16	key=start - value= 0

That’s all!

Huseyin OZVEREN