Threaded View

  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

Thread Participants: 2