Ext.PagingToolbar not working properly

I have a grid that displays images based on a category selection box next to the grid. For example if the all photos tab is selected, the grid displays all photos. If the hawaii tab is selected it only displays photos from hawaii. I have a mediaStore that keeps track of all the images.

bbar: new Ext.PagingToolbar({
        pageSize: 25,
        store: mediaStore,
        displayInfo: true,
        displayMsg: 'Displaying images {0} - {1} of {2}',
        emptyMsg: "No data to display"
    })

Here is the code i used to display the paging tool bar. It works perfectly for the all photos tab but when i click on any other category, say a category that has 50 photos, it displays 1 page of 2 with the next and back buttons. If you click on the next button, the grad switches back to displaying the all photos category and the page number jumps fr开发者_运维技巧om 1 of 2 to 2 of 5 instead of 2 of 2. Does anyone know what the problem could be?

This is because your mediaStore still contains all the records (image details). The filtering is just hiding the rows. Call the load method after you call the filterBy method:

mediaStore.load(mediaStore.lastOptions);

I ended up setting the baseParams to contain a selectionid and initially set it to '' in the jsonstore.

baseParams: 
{
    selectionid: ''
}

then when a selection is changed i modified the value of the baseParam using

mediaStore.setBaseParam('selectionid', record.id);