PDA

View Full Version : Next button disabled even though there are pages available.



bluepojo
19 Nov 2010, 7:09 AM
I created a basic grid that has a paging toolbar. For some reason when I load up at index 0, the Next Page button is disabled, even though the text says "Displaying page 1 of 5". If I choose anything higher than 0 in the load params for the store, it allows me to page forward and back, but it does not properly display the max # of pages and if I go back to the first page, the next button is once again disabled.

Any ideas?


var pageSize = 5;
var bugStore = new Ext.data.JsonStore({
autoDestroy: true,
url: '/bugs/fetch',
idProperty: 'id',
root: 'data',
storeId: 'bugStore',
fields: [ ... ]
});

var columnModel = new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [ ... ]
});

bugStore.load({params: {start:0, limit:pageSize} });

var grid = new Ext.grid.GridPanel({
store: bugStore,
colModel: columnModel,
trackMouseOver:false,
loadMask: true,
autoHeight: true,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
listeners: {
rowclick: {
fn: function(grid, rowIndex, event) {
var bug_id = grid.store.getAt(rowIndex).id;
Ext.getCmp('activity-panel').load(activity_lines_path(bug_id));
}
}
},
bbar: new Ext.PagingToolbar({
pageSize: pageSize,
store: bugStore,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});

return grid;

darthwes
19 Nov 2010, 9:46 AM
Your code doesn't produce text that would say "Displaying page 1 of 5".

bluepojo
19 Nov 2010, 10:13 AM
UPDATE: http://stackoverflow.com/questions/4226311/extjs-grid-paging-next-button-is-disabled

---


Oh hmm.. I meant where it says Displaying topics 1-5 of 5, and since my total is 25, I assumed it meant 5 pages, but it really means 5 total topics. I updated the code to include "totalProperty" on the Json Reader. It doesn't seem to be using that though.:

Here's the JSON response:


{"data":[{bug1}, {bug2}, {bug3}, {bug4}, {bug5}],"errors":{},"total_count":25}


function getBugGrid(activityPanelWrapper){
var pageSize = 5;
var bugStore = new Ext.data.JsonStore({
reader: new Ext.data.JsonReader({
totalProperty: 'total_count'
}),
autoLoad: {params:{start: 0, limit: pageSize}},
autoDestroy: true,
url: '/bugs/fetch',
idProperty: 'id',
region: 'center',
root: 'data',
storeId: 'bugStore',
fields: [ ... ]
});

var columnModel = new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [ ... ]
});

return new Ext.grid.GridPanel({
region: 'center',
store: bugStore,
colModel: columnModel,
trackMouseOver:false,
loadMask: true,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
listeners: {
rowclick: {
fn: function(grid, rowIndex, event) {
var bug_id = grid.store.getAt(rowIndex).id;
Ext.getCmp('activity-panel').load(activity_lines_path(bug_id));
}
}
},
bbar: new Ext.PagingToolbar({
pageSize: pageSize,
store: bugStore,
displayInfo: true,
displayMsg: 'Displaying bugs {0} - {1} of {2}',
emptyMsg: "No bugs to display"
})
});
}

darthwes
19 Nov 2010, 2:43 PM
You will find that JsonStores _are_ JsonReaders, and so you can just declare the totalProperty on the store.

Why does your store have a region property?

Why aren't you returning a success indicator in your json?

I'm not sure if
"errors":{} is legal, either, though if it is it's no biggie. I would expect it to see [{}] or have a value.

Aside from those things, your example should work.