View Full Version : PagingStore with GridFilters and PagingToolbar

15 Mar 2011, 7:02 AM

I've been for days looking for a way to make it working, and after trying all what i've found, i'm in the same situation. I hope anyone could give me some help.

I need a grid with local pagination and filtering. So, I've used a GridPanel, with GridFilters, an Ext.ux.PagintToolbar, and an Ext.ux.data.PagingGroupingStore.

I copy some fragments of the code:

//I do the following in order the server returns to me all the results (from 0 to 9999 as limit) but
//configuring the toolbar with start and limit as 0 and 20
store_info.load({params: {start:0, limit: 20,startSearch: 0, limitSearch: 9999, QueryText: querytext}});


store_info = new Ext.ux.data.PagingGroupingStore(
,autoLoad: {params: {start: 0, limit: 20,startSearch: 0, limitSearch: 9999}}


var filters = new Ext.ux.grid.GridFilters({
// encode and local configuration options defined previously for easier reuse
encode: false, // json encode the filter query
local: true, // defaults to false (remote filtering)
filters: [
type: 'date'
,dataIndex: 'xCreationDate'
,dateFormat: 'dd/mm/yy'

type: 'string'
,dataIndex: 'dDocTitle'

type: 'list'
,dataIndex: 'xFullName'
,options: filtersInit
,phpMode: true



var grid_content = new Ext.grid.GridPanel({
store: store_info,
baseCls: 'x-plain',
plugins: [filters],
colModel: new Ext.grid.ColumnModel({
columns: [
{header: lc("wwDate"), id:'idDate', width: 70, dataIndex: 'xCreationDate', sortable: true, groupable: false, xtype:'datecolumn', format:'d/m/Y', filterable:true, filter:{type:'date', dateFormat: 'dd/mm/yy'}},
{header: lc("wwTitle"), id:'idTitle' ,width: 320, dataIndex: 'dDocTitle', sortable: true, filter:{type: 'string'}},
{header: lc("wwAuthor"), id: 'idAuthor', width: 140, dataIndex: 'xFullName', sortable: true, filterable:true, filter: {type: 'list', options: filtersInit}},
{header: "", width: 145, dataIndex: 'dProcessingState', menuDisabled: true, sortable: false, renderer: renderCol5}
bodyStyle: 'background-color:#cfcfcf;margin-top:10px;border:solid #cfcfcf 1px;',
autoScroll: true
,view: new Ext.grid.GroupingView({
showGroupName: 'false',
groupTextTpl: '{text} ({[values.rs.length]})',
emptyText:"<br><img src='(...)btn_info.gif' alt='Information' title='Information'/><span style='margin-left:10px'><b>No matches found</b></span>"
bodyStyle: 'background-color:#eeeeee;margin-top:10px;border:solid #cfcfcf 1px;',
bbar: new Ext.ux.PagingToolbar({
pageSize: 20,
store: store_info,
displayInfo: true,
displayMsg: 'Displaying items {0} - {1} of {2}',
emptyMsg: "No items to display"
,plugins: filters



So, I don't know if something is missing, but i have several missfunctions to solve, and the headache is getting higger and higger:

-When the store is loaded, the grid starts in page 1, but when i in an arrow to advance to the second page, the first time it doesn't anything. I have to clic twice. Then, the pagination works fine.
-And the main problem is with filtering. It has 2 wrong funtionalitys:
-When i active some filter, it works, but when i go to another page, the filters get deactivated so i can't navigate inside the filtered results.
-The other problem is when i am, for example in page 5 (20 each page), and i activate a filter that lefts 25 results. I'm still in page 5. I don't know how it could be configured to go to page 1 when the filter is modified, what event is fired or even how could i change manually the page selected (the changePage isn't reachable, as the api says).

Thanx in advance if anyone knows something!!!!


15 Mar 2011, 8:05 AM
For one of your problems:

When applying a filter redirect to page 1 to ensure to display something:


15 Mar 2011, 8:12 AM
Thanx, but that's what i was trying, and it didn't work. While i was trying, bu the way, i realized something:

-Accessing through bbar a lot of functions, variables and attributes of the Pagination Toolbar didn't appear, but if I access through Ext.getCmp('grid').getBottomToolbar().<whatever>, then the appers! I think undercode (in getter functions) there is some cast, and without them, the objects hasn't all the attributes and functions reachable.

So, I'm trying that function (changePage) from FireBug "on the air" and it works perfectly, but i tried it in the page activated from the event "changedata" of the Store and it only crashes my firefox. Then, i've changed the call of the changePage to a alert('changedata') and it throws it twice when the page starts, making the page very slow, and the processors of my pc go to 80%, making all crashing...

I'm looking for another event wich could suit for me.

15 Mar 2011, 8:24 AM
Finally, as many other times, after i ask, i got the solution by myself, sorry.

I explain what was happening:

It's a search page, where i have a Search button. After the button has pressed, the search is performed and the, in the load event of the store, i charge the filter's lists, and i do a grid.reconfigure(). So, the filters get erased.

Then, in the grid's filterupdate event, i've putted a Ext.getCmp('grid').getBottomToolbar().changePage(1);

Then, before the store.load() action is called from the button handler, i stores in a boolean variable a true value.

Inside the load event of the store, i only do the actions if the variable is true, and put it to false.


when i call it for the first time, i go to the first page. And when the filter is updated, i also go to the first page, but this time, the filters aren't erased.