View Full Version : Can i change paging store dynamically?

31 Aug 2010, 5:59 PM
hi i'm newbie in Extjs..
i'll want to make a filtering for database combine with the paging too..

the problem is i can't change the store for paging

var paging = new Ext.PagingToolBar({
store : 'old',

i want to change that 'old' store into the new one..i'll try to use

paging.bind('new') and paging.bindStore('new') but it doesn't work

i am using Extjs 3.2.1

is there other way so i can change the store value?

thx for the help before


31 Aug 2010, 6:42 PM
Hi salice,

Actually the bindStore() method is exactly what you want, if you're trying to switch the store to which the PagingToolbar is bound. How have you determined that it's not working for you? Would you mind posting some code examples?


31 Aug 2010, 7:47 PM
hi jarred,

so i have 2 variables for the store

var db = new Ext.data.JsonStore({

var db2 = new Ext.data.JsonStore({

and i have this paging variable

var paging = new Ext.PagingToolbar({
store: db,

so when i try to fired an event(example: onClick) using this queryBy

db2 = db.queryBy(function(rec, id){
var str;
$.each(rec.data, function(i, v) {
str = str + '|' + v;
str = str + '|';
var removeHTML = new RegExp('<br>', 'ig');
var removeUndef = new RegExp('undefined', 'ig');
str = str.replace(removeHTML,' ');
str = str.replace(removeUndef,' ');
var pattern = new RegExp(Ext.getCmp('search').getValue(), 'ig');
if (pattern.test(str)){
return true;
} else{
return false;

the event doesnt want to work, but when i remove the paging.bindStore it works.

thx before for the help jarred,


31 Aug 2010, 9:10 PM
Hi salice,

The issue is here:

db2 = db.queryBy(function(rec, id){

queryBy() returns a MixedCollection (http://dev.sencha.com/deploy/dev/docs/?class=Ext.util.MixedCollection), not a Store. You can't pass the MixedCollection into the bindStore() call.

Irregardless, based on what you are trying to do, you should simply call the filterBy (http://dev.sencha.com/deploy/dev/docs/?class=Ext.data.Store&member=filterBy) function of the Store. This function will perform precisely the same operation as queryBy, only it will literally filter the records in the Store rather than return a MixedCollection. When the filter occurs, the Grid and PagingToolbar are updated accordingly, no need to have a second store that needs to be bound to the grid/toolbar.

Hope that helps.


31 Aug 2010, 11:30 PM
thx again jarred :)

but i already tried that filterBy before i use the queryBy. The problem is if i send a param for the paging

text: '10',
cls: 'x-btn6',
handler: function(){
paging.pageSize = 10;
db.load({params:{start:a, limit:paging.pageSize}});

if the result of this event more than 10 data and i call the filterBy, if the result of this filter less than 10 data then it will show the number of the data filtered (example: 8 data) but the page number still show more than one page

thx again for your time jarred, sorry if this issue bothering you..

1 Sep 2010, 6:18 AM
Hi salice,

It's no worries, I apologize for not understanding the issue off the bat. Whereas filterBy will indeed filter the records locally, it is only filtering "the current page" of records, and it doesn't trigger a "load" event in the Store, only a "datachanged" event. The PagingToolbar listens and only updates itself when the Store fires a load event. So you can do a couple of things:

1) Filter on the server, by passing in baseParams or ad hoc load() params for the Store. This is necessary if you are paging remotely. E.g.,

db.baseParams = {
// all logic to handle "filterBy" and filter the response JSON is on the server
filterBy: Ext.getCmp('search').getValue()
params: { start: 0, limit: paging.pageSize }

2) If you are paging locally with a store that has all local data, you need to use a community user extension, Ext.ux.data.PagingStore (http://extjs.com/forum/showthread.php?t=71532), which also contains a Ext.ux.PagingToolbar that understands local paging.

You could then do something like:

db.filterBy(...); // Data is now filtered and paged locally