View Full Version : AutoRefresh of GridPanel: baseParams not updated

27 Mar 2010, 10:49 AM

I'm very new to Ext JS and though I found my way through first problems I'm now stucked...
Following information found in this forum (thanks to authors :) ), I found a way to get a GridPanel with auto-refreshment of store, and paging.

Idea is that data is auto-refreshed and conditionned on a property ('msisdn') that is updated in the GridPanel from outside. I use setBaseParam to update this http parameter in the store, but it's not taken into account by AutoRefresher: the old value is always used. The new value is used only when refreshing the page completely, or clicking on "Refresh" in the PagingToolbar ...
In code below, if I uncomment the line in HistoryTable.Grid.setMsisdn(), new value for this parameter is taken into account, but all other parameters (start and limit from PagingToolbar) are dropped.

What I don't understand, is that they are supposed to all share the same store ? (between GridPanel, PagingToolbar and AutoRefresher). Or I might be missing something completely.

Thanks for any help

Here is the code for my panel:


HistoryTable.Grid = Ext.extend(Ext.grid.GridPanel, {
,setMsisdn: function(msisdn) {
this.msisdn = msisdn;
// this.store.reload({params:{'msisdn':msisdn}});
,initComponent: function() {
Ext.apply(this, {
store: new Ext.data.JsonStore({
,fields: dummyFields ]
,columns: dummyColumns
}); // eo apply

this.bbar = new Ext.PagingToolbar({
,plugins: [ new Ext.ux.grid.PageSizer()
, new Ext.ux.grid.AutoRefresher({intervals: [[0],[0.02],[0.5],[1]], interval: 0.02})

// call parent
HistoryTable.Grid.superclass.initComponent.apply(this, arguments);


,onRender:function() {
// load the store and set base params for action
this.store.load({params:{start:0, limit:10}});

// call parent
HistoryTable.Grid.superclass.onRender.apply(this, arguments);
} // eo function onRender
Ext.reg('historytablegrid', HistoryTable.Grid);
AutoRefresher (and PageSizer) come from this thread (http://www.extjs.com/forum/showthread.php?t=16811&page=3), I've taken versions for Ext 3.x, slightly updated from comments in this thread. Here is the AutoRefresher code I use:

* Ext.ux.grid.AutoRefresher
* Refresh a grid every x minutes
Ext.ux.grid.AutoRefresher = Ext.extend(Object, {
* @cfg {Array} intervals
* List of refresh intervals (as minutes) to populate the comboBox with
intervals: [[0],[0.1],[0.5],[1],[5],[10],[15],[30],[60]],

* @cfg {integer} interval
* default value
interval: 0.1,

* @cfg {String} beforeText
* Text to display before the comboBox
beforeText: 'Actualiser toutes les', // Refresh every

* @cfg {String} afterText
* Text to display after the comboBox
afterText: 'minutes', // minutes

* @cfg {Mixed} addBefore
* Toolbar item(s) to add before the PageSizer
addBefore: '-',

* @cfg {Mixed} addAfter
* Toolbar item(s) to be added after the PageSizer
addAfter: null,

init: function(Toolbar) {

this.Toolbar = Toolbar;

if (Toolbar.store) {
this.store = Toolbar.store

Toolbar.on("render", this.onRender, this);
Toolbar.on("beforedestroy", this.beforedestroy, this);

this.store.startAutoRefresh = function(interval){
this.autoRefreshProcId = setInterval(this.reload.createDelegate(this, [null]), interval*1000);

this.store.stopAutoRefresh = function(){
update: function(c){
var value = c.getValue();
this.interval = value;
if (value > 0) {
} else {
beforedestroy: function(){
onRender: function(){
var config = {
store: new Ext.data.SimpleStore({
fields: ['autoRefresh'],
data : this.intervals
displayField: 'autoRefresh',
typeAhead: true,
mode: 'local',
value: 0.02,
triggerAction: 'all',
selectOnFocus: true,
width: 50

var combo = new Ext.form.ComboBox(config);
combo.on("select", this.update, this);

var position = 11;
if (this.addBefore) {
this.Toolbar.insert(position, this.addBefore);

this.Toolbar.insert(position, this.beforeText,combo,this.afterText);
position += 3;

if (this.addAfter) {
this.Toolbar.insert(position, this.addAfter);

if (this.interval > 0) {
} else {

});Sorry for verbosity :">

27 Mar 2010, 5:10 PM
I haven't use setBaseParam, but you could pass another parameter in the load method like
this.store.load({params:{start:0, limit:10, action: 'getHistory' }});

27 Mar 2010, 5:29 PM
If you want to refresh a store with paging parameters, use pbar.doRefresh() rather than force-feeding the params to a store load.

28 Mar 2010, 1:54 AM

If I don't use baseParams, other parameters (msisdn and action) are not passed in next loads().

If you want to refresh a store with paging parameters, use pbar.doRefresh() rather than force-feeding the params to a store load.

I did not find the PagingToolbar.doRefresh() ? But I agree, I don't want to force-feed params.
All is working quite fine without any force-feed: 'action' and 'msisdn' are passed on each load() (Edit: only when set in baseParams), and paging parameters are passed accordingly.
Problem is that I would like 'msisdn' parameter to be taken into account in next load() when it is changed through setMsisdn().
But maybe I'm wrong, maybe I should delete and recreate the whole GridPanel when 'msisdn' is changed ?

6 Apr 2010, 6:40 AM
I could not call pbar.doRefresh() (always tells me that this function is undefined, couldn't find why), but this is what worked for me (in setMsisdn() in my panel):

// Reinject refreshed value in last options
if (this.store.lastOptions != null) {
this.store.lastOptions.params.msisdn = msisdn;
It's the only way I could find to have my own parameter new value taken into account while not loosing paging parameters, it's not very nice but it works well ...