View Full Version : BBar (PagingToolbar) doesn't response to the combobox filtering

28 Oct 2010, 8:06 PM
Hello every one.. I'm newbie here..:D

I've made a formPanel, there are a grid with bbar (PagingToolbar), comboBox and textField. Every things looks smooth, getting data from database with the baseParams I set is OK too. BUT, there are some errors when I want to filter the data, since I'm using the comboBox and textField to filter it.

Chronological of my case :
1. Getting data from database (without Filtering), it's OK.
2. When click the bbar button Next, Prev, Last, First, PageSize, Refresh, etc (without filtering), it's OK.

The Errors, When filtering using cmbSearch (field want to search) and txtSearch (search key) :
3. for example Totalpage is 3, active page now is 3, so it will goes like this -- 3/3
4. I choose cmbSearch and type the key in txtSearch
5. The result are just 6 row, so the bbar (activePage should be like this -- 1/1)
6. BUT, it goes like this -- 3/1. ??? So, I actually I success getting my data, unfortunately the bbar not response.
7. and another error is when I clicked any of the bbar button, it will get the data without see the filtering state.
8. Oh yeah, almost forgot. When I debug in server (to know if the params is OK), I get right searchBy and searchString params, BUT not the start and limit params, I get the last state in bbar not as I set in my store listeners.

Here is my Store CODE

function populateStoreUserProfile()
storeUserProfile = new Ext.data.JsonStore({
id: 'storeUserProfile',
root: 'userProfile',
totalProperty: 'totalCount',
idProperty: 'ID',
autoLoad: true,
remoteSort: true,
sortInfo: {
direction: 'ASC'
fields: [
{ name: 'ID', type: 'int' },
{ name: 'RowStatus' },
{ name: 'FullName' },
{ name: 'EmployeeNumber' },
{ name: 'HireDate', type: 'date', dateFormat: 'd.m.Y' },
{ name: 'Title' },
{ name: 'Phone1' },
{ name: 'PhoneExtension' },
{ name: 'Phone2' },
{ name: 'MobilePhone' },
{ name: 'Fax' },
{ name: 'Website' },
{ name: 'Room' },
{ name: 'HeadID', type: 'int' },
{ name: 'createdBy' },
{ name: 'createdDate', type: 'date', dateFormat: 'd.m.Y' },
{ name: 'modifiedBy' },
{ name: 'modifiedDate', type: 'date', dateFormat: 'd.m.Y' }
proxy: new Ext.data.HttpProxy({
url: 'UserProfileMaintainHandler.ashx',
method: 'GET'
baseParams: {
start: 0,
limit: 10
listeners: {
beforeload: function()
var searchType = Ext.getCmp('cmbSearch').getValue();
if (searchType != null)
start: 0,
limit: 10,
searchBy: Ext.getCmp('cmbSearch').getValue(),
searchString: Ext.getCmp('txtSearch').getValue()
store.baseParams = {
start: 0,
limit: 10,
searchBy: '',
searchString: ''

Here is my bbar CODE

bbar: new Ext.PagingToolbar({
id: 'pageToolbar',
pageSize: 10,
store: storeUserProfile,
displayInfo: true,
displayMsg: 'Displaying Data {0} - {1} of {2}',
emptyMsg: "No data to display",
plugins: new Ext.ux.grid.PageSizer({})

I use ASP .Net as my server side programming. If there are solutions I can use, I will really gratefull. I'm sorry if my English not too good. Please help me thank you very much...:)

29 Oct 2010, 5:54 AM
Before each filtering, try setting the paging toolbar cursor back to 0. grid.getBottomToolbar().cursor = 0;
For the filters to be applied on refresh and through paging, you will have to apply the filter params to the store's baseParams.

This is an example, on how I did it in a simple case where I had a filter menu allowing to select pre-configured filters. The code is getting executed when selecting a filter option.

handler: function(btn) {
//this = the grid

this.getBottomToolbar().cursor = 0;

//Remove previous filters
if (this.baseFilterParams)
for (var filter in this.baseFilterParams)
delete this.store.baseParams[filter];

//btn.filterParams contains the pre-configured filter options.
//I store the last filterParams used in a baseFilterParams property on the grid
//so that I can remove previous filters before applying new ones.
this.baseFilterParams = btn.filterParams;

Ext.apply(this.store.baseParams, this.baseFilterParams); //Apply filters in base params
this.getBottomToolbar().doRefresh(); //Refresh

31 Oct 2010, 6:39 PM
Thank you for your response...

Base on my understanding for your code here, you put 'handler' config in the grid. And I have explored the ExtJS 3.2.1 API Doc, there is no 'handler' config for gridPanel.

1. Which object that I should implement your code ? the grid or something else..?

31 Oct 2010, 11:32 PM
My PagingStore user extension contains an extended PagingToolbar that updates correctly when the store is filtered or modified.

1 Nov 2010, 5:18 AM
@Neullson (http://www.sencha.com/forum/member.php?181429-Neullson) This is the handler configuration of each MenuItem in a Menu. The way it works in that case is that when you click one of the item in the menu, it filters. If you understand the logic inside the function, you will be able to apply it to any pattern you want...