Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member Gjslick's Avatar
    Join Date
    Feb 2009
    Location
    NJ, USA
    Posts
    129
    Vote Rating
    6
    Gjslick will become famous soon enough

      0  

    Default [OPEN-377][3.x] Bottom Toolbar Rendering Near Top of Grid When Sized by Layout (IE7)

    [OPEN-377][3.x] Bottom Toolbar Rendering Near Top of Grid When Sized by Layout (IE7)


    Ext version tested:
    • Ext 3.0.3


    Adapter used:
    • ext


    css used:
    • only default ext-all.css


    Browser versions tested against:
    • IE 7 (problem occurs)
    • IE 8 (problem occurs with compatibility mode on)
    • IE 6
    • FF 3.5
    • Safari 4
    • Chrome 3


    Operating System:
    • WinXP Pro SP 2 - Behavior occurs on IE7
    • WinXP Pro SP 3 - Behavior occurs on IE8 in compatibility mode


    Description:
    • When a framed grid panel is sized by a layout, the bottom toolbar is rendered near the top until it is mouseover'd on IE7. On the mouseover of a button on the toolbar, it pops back down to its correct position. I have seen this happen on both IE6 and IE7, but the test case below only seems to exhibit the behavior on IE7 (and IE8 in compatibility mode). However, if the grid panel is not instantiated with a frame, there is no issue.

      I used a vbox layout for the example (as that is what my application uses), but the same behavior occurs with a fit layout too.


    Test Case:

    Code:
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Grid Panel Test Document</title>
        
        <link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext/ext-all.js"></script>
        
        <script>
            Ext.onReady( function() {
                
                new Ext.Panel( {
                    renderTo: 'panelDiv',
                    border: true,
                    height: 400,
                    width: 500,
                    
                    // Main Panel's Layout to size the Grid
                    layout: 'vbox',
                    layoutConfig: {
                        align: 'stretch'
                    },
                    
                    items: [
                        {
                            flex: 1,
                            width: 300,
                            xtype: 'grid',
                            
                            frame: true,
                            bbar: [
                                { text: "Test Button" }
                            ],
                            
                            store: new Ext.data.JsonStore( {
                                fields: [ 'field1', 'field2' ],
                                data: [
                                    { field1: "test1", field2: "test2" },
                                    { field1: "test3", field2: "test4" }
                                ]
                            } ),
                            
                            columns: [
                                { header: "Field 1", dataIndex: 'field1' },
                                { header: "Field 2", dataIndex: 'field2' }
                            ]
                        }
                    ]
                } );
                
            } );
            
        </script>
    </head>
    
    <body>
        <div id="panelDiv"></div>
    </body>
    </html>
    Steps to reproduce the problem:
    • Open in IE7 or IE8 with compatibility mode on. Initial rendering has the toolbar near the top.
    • When you mouseover the "Test Button", the toolbar snaps into its correct position.


    Screenshot or Video:
    • attached


    Debugging already done:
    • none


    Possible fix:
    • not provided


    Note: The first thumbnail is the initial rendering, before the button on the toolbar has been mouseover'd. The second is after the button on the toolbar has been mouseover'd.
    Attached Images

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    87
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    This happens because VBoxLayout uses position:absolute and the bbar in IE7 is specifically set to position:relative.

    You can work around the problem by using:
    Code:
    .ext-ie7 .x-grid-panel .x-panel-bbar {
    	position: static;
    }
    .ext-ie7 .x-grid-panel .x-panel-bbar .x-toolbar {
    	position: static;
    }

  3. #3
    Ext JS Premium Member Gjslick's Avatar
    Join Date
    Feb 2009
    Location
    NJ, USA
    Posts
    129
    Vote Rating
    6
    Gjslick will become famous soon enough

      0  

    Default


    Hey, thanks for this workaround Condor. Helps for the time being! This should definitely be patched in the next version though.

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,168
    Vote Rating
    119
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    You said you were able to reproduce this somewhere else in IE6? Could you provide us with an example?

    Scoping the workaround to only framed panels should prevent it from affecting panels in other places which may need the workaround....

    Try the following:
    Code:
    .ext-ie7 .x-grid-panel .x-panel-mc .x-panel-bbar {
        position: static;
    }
    This fixes the issue in IE7 under quirks mode immediately. When using a strict doctype, you will see the bottombar start up at the top for a brief second and then snap to the bottom (without user interaction).
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Ext JS Premium Member Gjslick's Avatar
    Join Date
    Feb 2009
    Location
    NJ, USA
    Posts
    129
    Vote Rating
    6
    Gjslick will become famous soon enough

      0  

    Default


    Hey Aaron, thanks for your reply.

    I just checked the place where I saw the problem happen in IE6, but it seems to be fixed now with 3.0.3. I had originally seen it happen with 3.0, and figured it probably was still an issue relating to this very same problem with IE7, but it's all good now. The toolbar starts at the top, but jumps down automatically after a second. So no IE6 issue after all. Sorry btw, wouldn't have added it to the bug report, but at the time I wrote it, I wasn't at home where I could log onto my desktop's IE6 VM and check.

    Anyway, thanks for the new workaround.

    Greg

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    87
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    The problem would also be solved when this patch is included in Ext 3.1.

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,498
    Vote Rating
    46
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    That is in the latest rev.

  8. #8

    Default Tool Bar Page number fix

    Tool Bar Page number fix


    In ExtJS 3.1.1 with IE7 you must use

    .ext-ie7 .x-grid-panel .x-panel-bbar .x-toolbar {
    position: static;
    }

    .ext-ie7 .x-grid-panel .x-panel-bbar .x-toolbar .x-tbar-page-number {
    position: static;
    }

  9. #9
    Ext JS Premium Member frew's Avatar
    Join Date
    Aug 2008
    Posts
    451
    Vote Rating
    0
    frew is on a distinguished road

      0  

    Default


    We have a related issue in Ext 3.4 (!!!) where tbar's fail to render at all. The posted CSS fixes it if you use tbar instead of bbar.

    Why isn't this closed yet? It's a 2 year old issue...
    -fREW

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..."