1. #1
    Sencha Premium Member
    Join Date
    Jan 2011
    Location
    New Hampshire, USA
    Posts
    14
    Vote Rating
    1
    fitzman49 is on a distinguished road

      0  

    Default Unanswered: Toolbar position incorrect using Ext.toolbar.Paging with grid

    Unanswered: Toolbar position incorrect using Ext.toolbar.Paging with grid


    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

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

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    Answers
    685
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    I have not see any reports of this. Can you duplicate your problem in this example?

    Code:
    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.

  3. #3
    Sencha Premium Member
    Join Date
    Jan 2011
    Location
    New Hampshire, USA
    Posts
    14
    Vote Rating
    1
    fitzman49 is on a distinguished road

      0  

    Default


    Quote Originally Posted by scottmartin View Post
    I have not see any reports of this. Can you duplicate your problem in this example?

    Code:
    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

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    Answers
    685
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Are there any outside influences ... custom CSS?

    Scott.

  5. #5
    Sencha Premium Member
    Join Date
    Jan 2011
    Location
    New Hampshire, USA
    Posts
    14
    Vote Rating
    1
    fitzman49 is on a distinguished road

      0  

    Default


    Quote Originally Posted by scottmartin View Post
    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

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    Answers
    685
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

  7. #7
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    Answers
    685
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Scott.

Thread Participants: 1

Tags for this Thread