Sunday, May 20, 2007

Paging with ExtJs Grid Widget (Updated for ExtJS 2.2)

Updated for ExtJS 2 :

Paging has changed a bit for ExtJS 2.0 from ExtJS 1.0 . In order to get grid paging to work with the grid component on ExtJS 2.2
  1. Create the paging toolbar.
  2. 
    var store = this is the same store used by the grid component
    
    var pagesize = 25;
    var paging_toolbar = new Ext.PagingToolbar({
    pageSize: pagesize,
    displayInfo: true,
    emptyMsg: 'No data found',
    store: store
    })
    
    
  3. Put the toolbar into the bottom bar of the grid component
  4. var grid = new Ext.grid.GridPanel({
    id:'mygrid',
    title:'My Grid',
    columns:[define your columns here]
    store:store,
      bbar:paging_toolbar
    })
    
  5. Call the data store's load function with start and limit parameters. Initially, start should be 0 while limit is the pagesize you pass to the paging toolbar
  6. store.load({params:{start:0,limit:pagesize}});
    
There is very comprehensive FAQ on the ExtJS wiki about the grids component. I encourage anyone who is having trouble with the ExtJS grid component to consult the FAQ.

The item in the FAQ that tackles paging can be found here.

Deprecated : ExtJS 1.0.1 is no longer available but I'm keeping the old content available below just case anybody still uses it for some reason. If you still are, though, I strongly suggest that you should upgrade to ExtJS 2.

There's lots of things to love about ExtJs. The grid widget is one of them. With ExtJs 1.0.1, paging has never been easier. Click the title for a quick tutorial about paging with the grid. If you're new to ExtJS there is a beginner's guide here.

Once you've defined your grid. The snippet below is one of the things you need to add in order to make the paging toolbar appear on your grid.

// create paging
var gridFoot = datagrid.getView().getFooterPanel(true);
var paging = new Ext.PagingToolbar(gridFoot, dataModel, {
pageSize: 20,
displayInfo: true,
displaymsg: 'Displaying {0} - {1} of {2}',
emptyMsg: "No records found"
});
paging.bind(dataModel);

7 comments:

  1. hi,

    i am using extjs-2.2;
    this paging is not working in extjs-2.2Anybady help me,


    I am using this way:
    My Grid name is=UserGrid;
    And dataModel is =UserGriddata;

    var gridFoot = UserGrid.getView().getFooterPanel(true);
    var paging = new Ext.PagingToolbar(gridFoot, dataModel, {
    pageSize: 20,
    displayInfo: true,
    displaymsg: 'Displaying {0} - {1} of {2}',
    emptyMsg: "No records found"
    });
    paging.bind(dataModel);

    ReplyDelete
  2. Hello,

    Unfortunately, that syntax no longer works with ExtJS 2.2.
    Please have a look again at this blog post. I have updated it for ExtJS 2.2. If you are still having trouble I would recommend that you visit the ExtJS wiki where there is a very comprehensive FAQ for the grid component. Check the post again, I have added the link to the FAQ and a direct link to the specific item in the FAQ that tackles paging.

    Thanks for dropping by.

    ReplyDelete
  3. I will use the param name but it dont work please help me

    ReplyDelete
  4. Sorry, your description is vague. What param name are you referring to ? How is it not working ? Do you get a javascript error ?

    ReplyDelete
  5. Ham-the-geek,
    Thanks great post, got the paging toolbar working in 5 minutes!

    -Lilit

    ReplyDelete
  6. There is a error in your example code

    var pagsize = 25;

    should be

    var pagesize = 20;

    The variable is referred to as pagesize later in the code.

    ReplyDelete