ExtJS grid page size – letting the user decide

Sometimes you’ll be using a Paging Toolbar on a grid and need to give the user the ability to change the number of records per page. One way of doing this is by adding a combobox to the toolbar:

var combo = new Ext.form.ComboBox({
  name : 'perpage',
  width: 40,
  store: new Ext.data.ArrayStore({
    fields: ['id'],
    data  : [
      ['15'], 
      ['25'],
      ['50']
    ]
  }),
  mode : 'local',
  value: '15',

  listWidth     : 40,
  triggerAction : 'all',
  displayField  : 'id',
  valueField    : 'id',
  editable      : false,
  forceSelection: true
});

We’ve set up a simple combo box which allows the user to choose between 15, 25 and 50 records per page. Now let’s set up a Paging Toolbar, and a listener to take action when the user changes the selection in the combo box:

var bbar = new Ext.PagingToolbar({
  store:       store, //the store you use in your grid
  displayInfo: true,
  items   :    [
    '-',
    'Per Page: ',
    combo
  ]
});

combo.on('select', function(combo, record) {
  bbar.pageSize = parseInt(record.get('id'), 10);
  bbar.doLoad(bbar.cursor);
}, this);

Finally we’ll roll it all together into a Grid:

var grid = new Ext.grid.GridPanel({
  //your grid setup here...

  bbar: bbar
});

If the user needs to be able to enter her own page size, replace the ComboBox with an Ext.form.NumberField, and attach the event listener to the field’s ‘keypress’ event.

22 Responses to ExtJS grid page size – letting the user decide

  1. FreshMedia says:

    Great tip. I do it slightly differently, but creating the bbar separately and referencing it works great.

  2. shubakk says:

    Great tips, work well with a nnumber field too.
    Any idea to put the number field before the refresh button and put the “changing page number” function on the refresh button click?

  3. shubakk says:

    Finally I found an answer to my question.

    ////////////////////////// CODE /////////////////////////////

    var field = new Ext.form.NumberField();
    this.getBottomToolbar().insert(10,field );

    field .on(‘change’,function(f,n,o) {
    var tbar = this.getBottomToolbar();
    tbar.pageSize = parseInt(n, 10);
    }, this);

    ////////////////////////// /CODE /////////////////////////////

    Doing this, i got a number field just before the refresh button. The on change function only changes the toolbar page size and then, when i click the refresh button the grid reload with the number i entered in my field.

  4. Ed Spencer says:

    Nice work shubakk

  5. Mikhail says:

    Hi Ed,

    I’d like to use your idea here but having problem setting the initial pageSize value of the pagingTool bar. (tbar)

    I found that if was not set this solution would not work properly in some cases.

    Which event would I need to use to set the initial pageSize to 10 for example.

    Thanks

    Mikhail

  6. Harshini says:

    I have used your example to add combo box to paging toolbaI have given 10 rows per page as default but it is actually loading 20 rows in the grid. The combo box is working fine but for the first time when it is loaded it is actually getting 20 rows from the store. I am not understanding what went wrong.Can you please help me in this issue.

    the error iam getting is

    Page 1 of 2 instead of page 1 of 4. it should actually display 10 per page but it is displaying 20 per page.

    Here is my code

    store.load({ params: { start: 0, limit: 10} });

    var combo = new Ext.form.ComboBox({
    name : ‘perpage’,
    width: 40,
    store: new Ext.data.ArrayStore({
    fields: [‘id’],
    data : [
    [’10’],
    [’25’],
    [’50’]
    ]
    }),
    mode : ‘local’,
    value: ’10’,

    listWidth : 40,
    triggerAction : ‘all’,
    displayField : ‘id’,
    valueField : ‘id’,
    editable : false,
    forceSelection: true
    });

    var bbar = new Ext.PagingToolbar({
    store: store, //the store you use in your grid
    displayInfo: true,
    items : [
    ‘-‘,
    ‘Per Page: ‘,
    combo
    ]
    });

    combo.on(‘select’, function(combo, record) {
    bbar.pageSize = parseInt(record.get(‘id’), 10);
    bbar.doLoad(bbar.cursor);
    }, this)

    And finally in the grid panel

    bbar: bbar,

  7. Harshini says:

    I got my answer. In order to restrict the initail load we have to pass the page size to both bbar and store.I had given pageSize: myPageSize to the bbar config object

  8. DotNetWise says:

    This is obsolete to ExtJS 3.1 / 3.2
    Please update it accordingly and add a fully functional demo / download

  9. Tom says:

    Thanks, very nice and handy post, not quite covered in the Ext-js Example…

  10. Pawan says:

    Thanks everyone.. I am able to use this if you are using only one of these two tbar or bbar.. I need to implement both.. How these would get synchronized to each other with reference to this drop down of page size values..

    Thanks a lot..

  11. Katija says:

    @DotNetWise – update it accordingly, add a fully functional demo, write my application for me, fix all my bugs. do it now. ???? Just be thankful he did something in the first place otherwise STFU and update it for 3.1/3.2 and post your update to Ed. Try helping out rather than just all up and demanding.

  12. Aswini says:

    Hi

    I want to add a bbar to the GridPanel dynamically without specifying in the

    var grid = new Ext.grid.GridPanel({
    //your grid setup here…
    bbar: bbar // HERE
    });

    something like

    if(!this.grid.getBottomToolbar())
    {
    var tbar = new Ext.PagingToolbar({
    pageSize: pageSize,
    store: store,
    displayInfo: true,
    autoScroll: true,
    plugins: [filters]
    });

    this.dataGrid.bbar=tbar;

    }
    }

    Then how I can do this please help??

  13. Aswini says:

    I tried this way:

    this.dataGrid.getBottomToolbar().hide();

    and its able to hide the bbar

  14. Worked very nicely. Thanks much for the article.

  15. Pingback: extjstutorial.org

  16. Pingback: Confluence: tools and snippets

  17. rbrill says:

    Nice, simple straightforward idea, as is always the case with Ext, however for some noob users out there It would be nice to know which version of Ext this is for, otherwise, nice tut.

  18. Vadim Dribinsky says:

    Hello, Ed.
    How would this code change in 4.1? As-is it does not work.

  19. anitha says:

    The same code is not working in Ext JS 4.1.

  20. praduja says:

    Thank you 🙂

  21. JSDev says:

    I was able to use this with ExtJS 4.2 by making following change to combo.on function:

    combo.on(‘select’, function(combo) {
    bbar.pageSize = parseInt(combo.value, 10);
    bbar.doRefresh();
    }, this);

    The remaining code works as it is. The only other change I made was the way pagingToolbar is configured. Instead of stating “bbar : bar” in grid configuration, my code states something like:

    dockedItems : [
    {
    xtype : bbar
    }
    ]

    P.S. This has been tested on Chrome Version 40.0.2214.111 (64-bit) on mac

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: