1. #1
    Ext User
    Join Date
    Jul 2007
    Posts
    37
    Vote Rating
    1
    y0y is on a distinguished road

      0  

    Cool [2.2] Viewport with nested border layouts - bug in FF3

    [2.2] Viewport with nested border layouts - bug in FF3


    I have stumbled on a specific behavior in FF3 (it does not occur in IE6, I am not sure about FF2) wherein if I have a Viewport with a border layout containing a north region and a center region, whose center region also contains a border layout with a tab panel center region and a regular panel east region.. if I make the east region collapsible, when it is collapsed the entire layout goes FUBAR.

    To reproduce, try to create the following viewport in an html page which has Ext loaded (using the Ext adapter) with the default ext-all.css. Nothing more.


    NOTE: This affects Ext 2.2. I am not sure about other versions.

    Code:
    Ext.onReady(function(){
        var layout = new Ext.Viewport({
            layout: 'border',
            items: [
                new Ext.Panel({
                    region: 'north',
                    height: 50,
                    id: 'header',
                    html: ''
                }),
                new Ext.Panel({
                    region: 'center',
                    layout: 'border',
                    items: [
                        new Ext.TabPanel({
                            region: 'center',
                            activeTab: 0,
                            items: [
                                {
                                    title: 'Tab 1',
                                    html: 'Tab 1 body'
                                },{
                                    title: 'Tab 2',
                                    html: 'Tab 2 body'
                                }
                            ]
                        }),
                        new Ext.Panel({
                            region: 'east',
                            width: 100,
                            collapsible: true,
                            collapsed: true,
                            title: 'Test'
                        })
                    ]
                })
            ]
        });
    Is this something that I am doing wrong? From what I can tell, this appears to be a rendering bug.
    Last edited by y0y; 9 Sep 2008 at 7:18 AM. Reason: Forgot to mention Ext version.

  2. #2
    Ext User
    Join Date
    Jul 2007
    Posts
    37
    Vote Rating
    1
    y0y is on a distinguished road

      0  

    Default


    Some additional information about this bug:

    It happens for both east and west oriented panels.

    It happens only when "callapsed: true" is set in the configuration - if it isn't collapsed at render-time it will work as expected.

    A kludgey work-around is to create a listener event for the viewport and, on the afterLayout event, collapse the panel manually via its collapse() method with a delayed task of ~100ms. This delay is enough to allow the viewport to render properly before the collapse takes place, avoiding the layout issue.

    This is still a bug in my eyes, though. Even with a work around.

  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      0  

    Default


    I just tested your code in FF 3.0.1, but I can't see anything wrong with it.

  4. #4
    Ext User
    Join Date
    Jul 2007
    Posts
    37
    Vote Rating
    1
    y0y is on a distinguished road

      0  

    Question


    Quote Originally Posted by Condor View Post
    I just tested your code in FF 3.0.1, but I can't see anything wrong with it.
    I'm using FF 3.0.1, as well. Everyone that has tried this in the office has the same issue, so it's definitely not just isolated to my machine. It doesn't have to be a tab panel, either. The following has the same result:

    Code:
    Ext.onReady(function(){
        var layout = new Ext.Viewport({
            layout: 'border',
            items: [
                new Ext.Panel({
                    region: 'north',
                    height: 50,
                    html: ''
                }),
                new Ext.Panel({
                    region: 'center',
                    layout: 'border',
                    items: [
                        new Ext.Panel({
                            region: 'center',
                            html: 'Test'
                        }),
                        new Ext.Panel({
                            region: 'east',
                            width: 100,
                            collapsible: true,
                            collapsed: true,
                            title: 'Test'
                        })
                    ]
                })
            ]
        });
    })
    Here is a screen shot:
    Attached Images

  5. #5
    Ext User
    Join Date
    Jul 2007
    Posts
    37
    Vote Rating
    1
    y0y is on a distinguished road

      0  

    Exclamation


    I can also reproduce this bug with the following Ext sample:

    http://www.extjs.com/deploy/dev/exam...ow/layout.html

    Simply add

    collapsible: true,
    collapsed: true

    to the nav panel as so:

    Code:
    // Panel for the west
            var nav = new Ext.Panel({
                title       : 'Navigation',
                region      : 'west',
                split       : true,
                width       : 200,
                collapsible : true,
                margins     : '3 0 3 3',
                cmargins    : '3 3 3 3',
                collapsible : true,
                collapsed   : true
            });

  6. #6
    Ext User
    Join Date
    Jul 2007
    Posts
    37
    Vote Rating
    1
    y0y is on a distinguished road

      0  

    Default


    It also appears that the following thread is regarding the same issue:

    http://www.extjs.com/forum/showthread.php?t=45717

  7. #7
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      0  

    Default


    I tested the modified layout example and the link in the thread you posted, but both show the correct layout.

    Are you using something different than Ext 2.2, FF 3.0.1 and Windows XP SP3 ?

  8. #8
    Ext User
    Join Date
    Jul 2007
    Posts
    37
    Vote Rating
    1
    y0y is on a distinguished road

      0  

    Default


    The thread I posted describes the same issue, but the person who posted the thread fixed their code. They "fixed" it by not having the panel collapsed at render time. Sorry for any confusion there.

    It certainly is odd that you're not seeing this. This is my setup:

    1. Windows XP SP2
    2. FF 3.0.1 with the following extensions enabled:
    - Firebug 1.3x.a01 (however my coworker experiences this with the latest stable release)
    - ColorfulTabs 3.4
    - YSlow 0.9.5b2
    3. Ext 2.2 - latest release on the home page
    - ext adapter
    - ext-all.css

    I can't think of anything else that might be relevant. It should be noted that this problem is being seen with a variety of extensions, and also appears when I disable all of them.

    When I get home I will see if I have the same issue there. Maybe something about the setup in our office is different.

  9. #9
    Ext JS Premium Member nateirwin's Avatar
    Join Date
    Oct 2007
    Location
    Denver, Colorado, USA
    Posts
    69
    Vote Rating
    0
    nateirwin is on a distinguished road

      0  

    Default


    I'm seeing a similar issue. Did you find a workaround (other than rendering and then collapsing)?

  10. #10
    Ext JS Premium Member nateirwin's Avatar
    Join Date
    Oct 2007
    Location
    Denver, Colorado, USA
    Posts
    69
    Vote Rating
    0
    nateirwin is on a distinguished road

      0  

    Default


    Okay, figured it out. I had an override in that was causing this issue.

    So, to summarize, I was able to nest border layouts and everything worked correctly.

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar