Toolbar position incorrect using Ext.toolbar.Paging with grid

[fitzman49]

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.

weirdToolbar.png

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

[scottmartin]

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]

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.

simpsons.png

[scottmartin]

Are there any outside influences ... custom CSS?

Scott.

[fitzman49]

Are there any outside influences ... custom CSS?

Scott.

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

weirdToolbar.png

[scottmartin]

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]

What if you take the data our of the picture ..and just draw the grid?
Perhaps a custom cell rendering issue?

Scott.