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