PDA

View Full Version : Grid Paging bar not showing current page. Everything else works fine.



ELRG
18 Feb 2013, 12:11 PM
Hello everyone, and thanks in advance for assistance with this issue.

I have a grid , populated with json loaded from the backend, paging is remote and each hunk of 25 items is served up properly. Everything functionally works fine as far as loading and paging goes, there is just no page number in the paging bar.
It looks like this.

41924

here is the relevant code.

var theStore = Ext.create('Ext.data.Store', {
model: 'SearchResult',
pageSize: 25,
remoteSort: true,
proxy:
{
type: 'ajax',
url: '/Search/SubmitSimpleQuery',
reader:
{
type: 'json',
root: 'Results',
totalProperty: 'totalHits'
},
extraParams:
{
searchText: theSearchText,
beginDate: theBeginDate,
endDate:theEndDate,
collectionMatch:theCollection
}
}
});
theStore.load();


var grid = Ext.create('Ext.grid.Panel',
{
store: theStore,
width: '100%',
height: '100%',
columns:
[


{
text: 'Title',
dataIndex: 'title',
width: '60%'


},


{
text: 'Published Date',
dataIndex: 'pubDate_ymd',
renderer: renderDate
},
{
text: 'Released Date',
dataIndex: 'releaseDate_ymd',
renderer: renderDate
},
{
text: 'From',
dataIndex: 'from',
hidden: true


},
{
text: 'To',
dataIndex: 'to',
hidden: true


}
],
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
store: theStore,
displayInfo: true,
displayMsg: 'Displaying results {0} - {1} of {2}',
emptyMsg: 'No results'
}]


});




Ext.create('Ext.panel.Panel',
{
bodyPadding:25,
width:'100%',
renderTo:Ext.getBody(),
items:[
grid
]


});


the totalproperty is coming in via he json correctly - for example 108 which results in 5 pages. all paging works. when paging to page 2,
page:2 , start:25, limit: 25 are all passed to the server, so ext knows what page it is, but its not getting into the current page box. do I need to then set that page value to a property on the proxy or store?

Im stumped and Ive been banging my head against this one for a while.

thanks.

sword-it
19 Feb 2013, 3:30 AM
HI ELRG,

See this working example-


Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
pageSize:'4',
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});


Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
dockedItems: [{
xtype: 'pagingtoolbar',
store: Ext.data.StoreManager.lookup('simpsonsStore'), // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
});

ELRG
19 Feb 2013, 2:48 PM
Hi,

the only applicable difference I can see between that code and mine is using Ext.data.StoreManager.lookup to get the store.

I tried using that instead of a variable but unfortunately it did not fix it.

ELRG
21 Feb 2013, 7:55 AM
the experts are stumped?:s

seanl
26 Feb 2013, 10:05 AM
I would guess that the page number is populated but you just cannot see it due to the small width it has (based on your uploaded image).

The paging toolbar may be rendering funny due to the lack of any sort of layout within your example code. Maybe try setting your panel to use a layout of "fit". Alternately, you really do not need this panel at all as it is just holding your grid (over nesting). Try adding the renderTo property on your grid and omitting the panel entirely.

ELRG
27 Feb 2013, 12:33 PM
Well after deploying it to a test server it mysteriously works now :-/

Still doesnt work in my development environment so.....who knows, but crisis averted. On to the next problem... :((

seanl thanks for the suggestions on the panel. I will incorporate that. Also, looking at the element in chrome dev tools there was no value in that element so it wasnt just a display thing.

thanks for the assistance