PDA

View Full Version : AutoRefresh of GridPanel: baseParams not updated



Jerem
27 Mar 2010, 10:49 AM
Hello,

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:



Ext.ns('HistoryTable');

HistoryTable.Grid = Ext.extend(Ext.grid.GridPanel, {
msisdn:''
,setMsisdn: function(msisdn) {
this.msisdn = msisdn;
this.store.setBaseParam('msisdn',msisdn);
// this.store.reload({params:{'msisdn':msisdn}});
}
,initComponent: function() {
Ext.apply(this, {
store: new Ext.data.JsonStore({
id:'actionId'
,totalProperty:'count'
,root:'events'
,url:Properties.ajaxUrl
,fields: dummyFields ]
})
,columns: dummyColumns
,viewConfig:{forceFit:true}
}); // eo apply

this.bbar = new Ext.PagingToolbar({
store:this.store
,displayInfo:true
,pageSize:10
,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.setBaseParam('action','getHistory');
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.namespace("Ext.ux.grid");
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){
if(this.autoRefreshProcId){
clearInterval(this.autoRefreshProcId);
}
this.autoRefreshProcId = setInterval(this.reload.createDelegate(this, [null]), interval*1000);
}

this.store.stopAutoRefresh = function(){
if(this.autoRefreshProcId){
clearInterval(this.autoRefreshProcId);
}
}
},
update: function(c){
var value = c.getValue();
this.interval = value;
if (value > 0) {
this.store.startAutoRefresh(value*60);
} else {
this.store.stopAutoRefresh();
}
},
beforedestroy: function(){
this.store.stopAutoRefresh();
},
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);
position++;
};

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

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


combo.setValue(this.interval);
if (this.interval > 0) {
this.store.startAutoRefresh(this.interval*60);
} else {
this.store.stopAutoRefresh();
}
}

});Sorry for verbosity :">

j_mmontero
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' }});

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

Jerem
28 Mar 2010, 1:54 AM
Thx,

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 ?

Jerem
6 Apr 2010, 6:40 AM
Hi,
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;
this.store.reload(this.store.lastOptions);
}
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 ...