View Full Version : Need help on Pagination - Ext.ux.DynamicGridPanel and Ext.PagingToolBar

3 Dec 2009, 11:22 PM
:-?. Dear Gurus,

I am just a few days old at Ext Js, and already loving it. I believe that there is a lot of power buit-in to Ext Js.

I need your kind support in this. One of my team members (to which I am new) has built in the past, a search screen. You can enter a search criteria, and then results are shown.

There is a problem with the results. Pagination is disabled. The data structure used to display the grid is - Ext.ux.DynamicGridPanel. Within this, Ext.PagingToolBar component has been used. The code snippet for the same is -
tabPanel = Ext.getCmp('assetPanel').findById('assetgridTabs');
tableName = Ext.getCmp('tableNamesCB').getValue();
gridId = tableName+'grid';
var tab = tabPanel.items.find(
return i.title == tableName;

if (!tab)
tab = tabPanel.add({

title: tableName,
new Ext.ux.DynamicGridPanel({

id: gridId,
storeUrl: assetGridUrl,
rowNumberer: true,
width: 600,
height: 300
,frame: true

// paging bar on the bottom
,bbar: new Ext.PagingToolbar({
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying Records {0} - {1} of {2}',
emptyMsg: "No Records to display"




I referred to the pagination example from the tutorial samples, where
Ext.grid.GridPanel is used (I understand that this is a static panel, where you have to
explicitly define column structure). This example works perfect. However,
when I use the DynamicGridPanel as described above, the pagination is disabled. Only
first 25 records show up, and no way to navigate to the rest.

I request you to throw in some pointers to resolve the issue.

Please help in this regard. The examples and the discussions what I found in the web is more towards Ext 2.x version of DynamicGridPanel (Ext.grid.DynamicGridPanel). However, the ext 3.0.3 version that I am using, I think the package has changed, Ext.ux.DynamicGridPanel, with a different behaviour.

Please suggest on what should I make the DynamicGridPanel and PagingToolBar to enable pagination. Giving 'store' parameter did not help me. I have attached the screenshot for the same. I have also attached the complete source where the call back action function is defined, which contains the source for the DynamicGridPanel and PagingToolBar.

Kindly analyze and advise on how to resolve the problem.

Best Regards,

7 Dec 2009, 4:09 AM
The PagingToolbar needs a reference to the store. The problem is that DynamicGridPanel creates it's own store, so it doesn't exist yet when the pagingtoolbar is created.

You could try:

var toolbar = new Ext.PagingToolbar({...});
var grid = new Ext.ux.DynamicGridPanel({
bbar: toolbar

7 Dec 2009, 10:50 PM
That was spot on ! Thank you very much for the suggestion, it did solve the issue. Infact, I earlier tried to get a store and then explicitly specify as part of PagingToolBar, but got error while getting the store, because it does not exist yet and gets created after creating the tool bar.

But certainly, your inputs helped me, because, I was unaware of this api to bind the grid store to the toolbar.

Thanks again for the kind help.
Best Regards,