Results 1 to 3 of 3

Thread: grid paging current page

  1. #1

    Default grid paging current page

    hello guys,

    i am implementing the grid paging with GroupingStore

    what my objective is to get the following

    when the user clicks on the next button, my code should fetch the next set of records from the server.

    but i am not getting the current page,which i can pass in my query
    here is the code



    Code:
       var store = new Ext.data.GroupingStore({
            reader: reader,
            //autoLoad: true,
            url: 'http://localhost/ext/examples/grid/data.asp?pgno='+ parseInt(CurrentPage +1),
            sortInfo:{field: 'company', direction: "ASC"},
            groupField:'industry'
        });
    
    grid4 = new xg.GridPanel({
            id:'button-grid',
            store: store,
            columns: [
                 sm2,
                {id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
                {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
                {header: "Change", width: 20, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney},
                {header: "Industry", width: 20, sortable: true, dataIndex: 'industry'},
                {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ],
    
            sm: sm2,
            view: new Ext.grid.GroupingView({
                forceFit:true,
                startCollapsed:true,
                groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
            }),
             // paging bar on the bottom
            bbar: new Ext.PagingToolbar({
                pageSize: 10,
                store: store,
                displayInfo: true,
                displayMsg: 'Displaying stones {0} - {1} of {2}',
                emptyMsg: "<b>No Stones to Display</b>"    ,
                listeners: {
                beforechange: function (paging, params) {
                    console.debug(paging)
                    console.debug(params)
                    CurrentPage = params.activePage;
                    console.debug(CurrentPage)
                }
                }
    
            }),
            columnLines: true,
            // inline buttons
            buttons: [
                    {text:'Add to Cart',tooltip:'Add a new row',iconCls:'add',handler: AddToCart},
                    {text:'Add to hold list',tooltip:'',iconCls:'option',handler: AddToHoldList}
                    ],
            buttonAlign:'left',
            // inline toolbars
            tbar:[
                    {text:'Add to Cart', tooltip:'Add a new row', iconCls:'add', handler: AddToCart},
                    '-', 
                    {text:'Add to hold list', tooltip:'', iconCls:'option',handler: AddToHoldList},
                    '-',
                    {text:'Remove Selection',tooltip:'Remove the selected item',iconCls:'remove',ref: '../removeButton',handler: RemoveFromList, disabled: true}
                  ],
    
            width:1250,
            height:450,
            frame:true,
            loadMask: true,
            layout:'fit',
            //title:'Support for standard Panel features such as framing, buttons and toolbars',
            iconCls:'icon-grid',
            renderTo: 'grid-Panel'
        });
    please advice, what i am missing

    thx

  2. #2
    Sencha User
    Join Date
    Nov 2009
    Location
    Wisconsin
    Posts
    19

    Default

    Your going to want your store to look like this:
    Code:
       var store = new Ext.data.GroupingStore({
            reader: reader,
            //autoLoad: true,
            url: 'http://localhost/ext/examples/grid/data.asp',
            params :{'pgno' :1},
            sortInfo:{field: 'company', direction: "ASC"},
            groupField:'industry'
        });
    The before change function could look like this.

    Code:
     beforechange: function (paging, params) {
                    var CurrentPage = params.activePage;
                    this.store.load(params : {'pgno' : CurrentPage});
                }

  3. #3

    Default

    Thx for pointer...

    i am able too resolve the issue, now i need to implement the data on the server.. i will let you know when i am done

    here is my code
    Code:
    var CurrentPage =1;
    var store = new Ext.data.GroupingStore({
            reader: reader,
            autoLoad: {params:{start: 0, limit: 25}},
            url: 'http://localhost/ext/examples/grid/data.asp',
            //params :{start:0, limit:20, pgno :1},
            sortInfo:{field: 'company', direction: "ASC"},
            groupField:'industry'
        });
    store.setBaseParam('pgno',CurrentPage);
    
    
    
    my paging bar
             // paging bar on the bottom
            bbar: new Ext.PagingToolbar({
                pageSize: 10,
                store: store,
                prependButtons: true,
                displayInfo: true,
                displayMsg: 'Displaying stones {0} - {1} of {2}',
                emptyMsg: "<b>No Stones to Display</b>"    ,
                listeners: {
                    beforechange: function (paging, params) {
                    CurrentPage = Math.ceil((paging.cursor + paging.pageSize) / paging.pageSize);
                    CurrentPage = (CurrentPage+1);
                    this.store.setBaseParam('pgno',CurrentPage);
                }
                }
    
            }),

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 in grid loads first page but 2nd page not loading
    By Tamara Williams in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 18 Feb 2010, 5:39 AM
  3. Sorting grid(whole grid, not only current page)
    By Y2K.bug in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 7 Oct 2008, 10:27 AM
  4. PagingToolbar: How to get the current page
    By leolima in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 11 Sep 2008, 6:21 AM
  5. GridPanel current page
    By nightmage in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 29 Apr 2008, 10:52 AM

Posting Permissions

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