PDA

View Full Version : Toolbar position incorrect using Ext.toolbar.Paging with grid



fitzman49
16 Aug 2012, 10:17 AM
Hi All,

I've seen some unexpected behavior after recently upgrading from EXT JS 4.1.1 RC1 to EXT JS 4.1.1 final. I have a grid which contains a paging toolbar as it's bottom toolbar (using the bbar config option for a grid). In some instances when this grid is rendered the paging toolbar is rendered above the area is is supposed to be. The toolbar config I am using is used other places inside our project with no issue. In a couple places this behavior occurs though. I have included a screenshot and a code example below. Anyone have an idea on what may be going on? If anymore info is needed please let me know. Thanks for looking.

38015



var bbar = Ext.create('Ext.toolbar.Paging', {
store: this.configProperties.store,
displayInfo: true,
displayMsg: pagingMessages.displayMsg,
emptyMsg: pagingMessages.emptyMsg
});

scottmartin
16 Aug 2012, 10:52 AM
I have not see any reports of this. Can you duplicate your problem in this example?



var store = Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'change'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "change":100 },
{ 'name': 'Bart', "email":"bart@simpsons.com", "change":-20 },
{ 'name': 'Homer', "email":"home@simpsons.com", "change":23 },
{ 'name': 'Marge', "email":"marge@simpsons.com", "change":-11 }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

var pageBar = Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying {0} - {1} of {2}',
emptyMsg: 'No records to display'
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' }
],
height: 200,
width: 400,

bbar: pageBar,

renderTo: Ext.getBody()
});
??

Scott.

fitzman49
16 Aug 2012, 11:07 AM
I have not see any reports of this. Can you duplicate your problem in this example?



var store = Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'change'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "change":100 },
{ 'name': 'Bart', "email":"bart@simpsons.com", "change":-20 },
{ 'name': 'Homer', "email":"home@simpsons.com", "change":23 },
{ 'name': 'Marge', "email":"marge@simpsons.com", "change":-11 }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

var pageBar = Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying {0} - {1} of {2}',
emptyMsg: 'No records to display'
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' }
],
height: 200,
width: 400,

bbar: pageBar,

renderTo: Ext.getBody()
});
??

Scott.

Hi Scott,

Thanks for looking into this. I've tried your code and the bottom toolbar seems to render as expected. I'm not sure if its a CSS issue since I used Chrome developer tools to change the position on .x-toolbar between relative and absolute a couple times and the toolbar fell into place as expected. When I refreshed the page after, the issue came back. If you need me to post anything else which might be useful please let me know.

38017

scottmartin
16 Aug 2012, 11:11 AM
Are there any outside influences ... custom CSS?

Scott.

fitzman49
16 Aug 2012, 11:18 AM
Are there any outside influences ... custom CSS?

Scott.

Sadly the issue still persists if I remove all custom CSS files except the EXT one.

38018

scottmartin
16 Aug 2012, 11:25 AM
The next step would be to provide me a small test case that can be used to duplicate your issue.
In many cases, the stand-alone can be used to pinpoint the problem.

Scott.

scottmartin
16 Aug 2012, 11:26 AM
What if you take the data our of the picture ..and just draw the grid?
Perhaps a custom cell rendering issue?

Scott.