Results 1 to 3 of 3

Thread: ExtJS Paging Toolbar start page

  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2010
    Posts
    4

    Default ExtJS Paging Toolbar start page

    I have an ExtJS GridPanel with a store and a paging toolbar at the bottom. I can manually set the start page through the browser using:

    www.someurl.com/page/7

    This will load the data store with page 7 correctly. However, the paging toolbar does not update the page number from the store (it still shows 1). I was under the impression that by changing the page of the store also changes the page in the paging toolbar, but this is not the case. Here is some example code:

    Code:
    var _store = new Ext.data.Store({
          id          : 'store_id',
          remoteSort  : true,
          autoDestroy : true,
          restful     : true,
          proxy       : _proxy,
          reader      : _reader,
          writer      : _writer
        });
    
     var _pagingToolbar = new Ext.PagingToolbar({
          displayInfo    : true,
          pageSize       : 20,
          store          : _store
        });
    
    _I.grid = new Ext.ux.GridPanel({
         id             : 'the_grid',
         title          : 'the_title',
         store          : _store,
         bbar        : _pagingToolbar
        });
    
    
    _I.options.page = 7; //start store on page 7
    
    _I.grid.render('somediv');
    _store.load({params:{start:_I.options.page, limit:20, sort:'id', dir:'ASC'}});
    Since the start page is set to 7, the data that loads in the store is correct, however, the page in the paging toolbar reads 2. I have tried manually setting the page with

    Code:
        _pagingToolbar.changePage(20); // should set page to 20
    I get the same result, the data store loads up the correct page, however the toolbar text does not change. Is the order wrong? I also tried loading the store before the grid is rendered, to no avail, with same result.

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    'start' is not the page number; it's the first record number to show, so you should use:
    Code:
    _store.load({params:{start:_I.options.page * 20, limit:20, sort:'id', dir:'ASC'}});

  3. #3
    Ext JS Premium Member
    Join Date
    Feb 2010
    Posts
    4

    Default Another Solution

    Thank you for your reply Condor. I did not realize that was not the page number so that is another good solution. After digging through the PagingToolbar class I found a handy little method that does not exist in the API. Looking through, the PagingToolbar has a property called inputItem which is an instance of an Ext.form.NumberField. The code to make the manual change to that value using the previously posted code would look something like this:

    Code:
    _pagingToolbar.inputItem.setValue($pageNum+1);
    Since the data is already on the correct page, all it takes is to sync the number up with the correct page. The reason you need to add a 1 is because the paging starts at 0 on the client side, but on the server side it starts at 1. Both solutions are equally acceptable to me and I again thank you for your response.

Similar Threads

  1. paging grid; need to know page number or start Index of current page
    By Tina G in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 5 Jan 2011, 1:57 AM
  2. Paging ToolBar always showing first page
    By alexaung in forum Ext 3.x: Help & Discussion
    Replies: 10
    Last Post: 29 Jul 2010, 4:00 AM
  3. Extjs paging toolbar for php paging
    By speedytangent in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 29 Mar 2009, 2:14 PM
  4. First active page in paging toolbar is not right
    By extuzer in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 19 Feb 2008, 8:57 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •