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
    8,927
    Answers
    656
    Vote Rating
    443
    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
    8,927
    Answers
    656
    Vote Rating
    443
    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
    8,927
    Answers
    656
    Vote Rating
    443
    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
    8,927
    Answers
    656
    Vote Rating
    443
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi