1. #1
    Ext User
    Join Date
    Feb 2008
    Posts
    11
    Vote Rating
    0
    ckeller is on a distinguished road

      0  

    Default Problems with paging toolbar

    Problems with paging toolbar


    Hi

    i have some trouble with the paging toolbar. My ext app consists of a viewport which contains a treeview and a grid. It works like a file explorer. The grid shows only data, if a node in the tree is selected. This works without a problem. I tried to implement paging for the grid, but I have problems to get the paging toolbar working.

    When I click a tree node, all data in the datastore is cleared and new data is requested.
    Code:
    listeners: {
                click: function(n) {
                    dstore.removeAll();
                    dstore.load({params: {'folder': n.attributes.id, 'start': 0, 'limit': 2}});
                }
            }
    The parameters start and limit are handled correct by my server-side code.
    Following JSON data is returned
    Code:
    {"rowCount":5,"rows":[{"id":"f0cbd5f3-71d9-dc11-a7df-0003ff57ba61","titel":"Angebot1","modifiedOn":new Date(1202824436000),"modifiedBy":"Nachname, Vorname","account":"Bar","inprogress":false},
    {"id":"2000eafc-71d9-dc11-a7df-0003ff57ba61","titel":"Angebot2","modifiedOn":new Date(1202824452000),"modifiedBy":"Nachname, Vorname","account":"Bar","inprogress":false}]}
    These two rows are displayed correct in the grid. The paging toolbar says correct "Displaying topics 1-2 of 5". However the paging buttons are not enabled. I am not able to select the next page (see screenshot).

    This is the config of my grid, datastore, ...

    [CODE]var jsonReader = new Ext.data.JsonReader({
    root: 'rows',
    totalProperty: 'rowCount',
    id: 'id',
    fields: [
    {name: 'titel'},
    {name: 'modifiedOn', type: 'date', dateFormat: 'U'},
    {name: 'modifiedBy'},
    {name: 'account'},
    {name: 'inprogress'}
    ]
    })

    var dstore = new Ext.data.GroupingStore({
    proxy: new Ext.data.HttpProxy({url:'../GridProvider.aspx?cmd=getData'}),
    reader: jsonReader,
    sortInfo: {field: 'titel', direction: 'ASC'}
    })

    var view = new Ext.grid.GroupingView({
    forceFit:true,
    emptyText: '<div style="text-align:center;">No Resources were found</div>',
    groupTextTpl: '<span class="groupHeader">{text}</span> ({[values.rs.length]} {[values.rs.length > 1 ? "Resources" : "Resource"]})',
    enableRowBody:true,
    showPreview: true
    });

    var bbar = new Ext.PagingToolbar({
    pageSize: 20,
    store: dstore,
    autoHeight: true,
    displayInfo: true,
    displayMsg: 'Displaying topics {0} - {1} of {2}',
    emptyMsg: "No topics to display"
    });

    var grid = new Ext.grid.GridPanel({
    store: dstore ,
    autoScroll: true,
    loadMask:true,
    columns: [
    {header: 'Titel', width: 200, sortable: true, dataIndex: 'titel'},
    {header: 'Kunde', width: 120, sortable: true,dataIndex: 'account'},
    {header: 'Ge
    Attached Images

  2. #2
    Sencha User nomack84's Avatar
    Join Date
    Oct 2007
    Location
    Quito, Ecuador
    Posts
    239
    Vote Rating
    188
    nomack84 is infamous around these parts nomack84 is infamous around these parts nomack84 is infamous around these parts nomack84 is infamous around these parts

      0  

    Default


    The problem is simple: your paging pageSize is 20, and the limit you send the server is 2, just change the pageSize to 2 or the limit to 20, and should work fine.
    Ext is terrific!!

  3. #3
    Ext User
    Join Date
    Feb 2008
    Posts
    11
    Vote Rating
    0
    ckeller is on a distinguished road

      0  

    Default


    Thank you. That was the solution. So easy

    However the parameter 'folder' which I pass on a node click, is not passed if I page to the next page. Where is the right place to query for this parameter: beforeLoad-Event of the datastore, baseParams?

    Thanks in advance

  4. #4
    Ext User
    Join Date
    Feb 2008
    Posts
    11
    Vote Rating
    0
    ckeller is on a distinguished road

      0  

    Default


    Hi,

    I just solved my problem. I add the parameter in the beforeLoad-Event of the datastore according to http://extjs.com/forum/showthread.ph...ing+beforeload

    Thanks for help

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Location
    Bangalore,IN
    Posts
    114
    Vote Rating
    0
    gameboy87 is on a distinguished road

      0  

    Default


    Can you provide a detailed Info on this ?

    The pageSize must be set in store or the grid ?


    Quote Originally Posted by nomack84 View Post
    The problem is simple: your paging pageSize is 20, and the limit you send the server is 2, just change the pageSize to 2 or the limit to 20, and should work fine.

Thread Participants: 2