1. #1
    Sencha - Services Team Stju's Avatar
    Join Date
    Dec 2008
    Location
    Redwood city, California
    Posts
    288
    Vote Rating
    3
    Stju is on a distinguished road

      0  

    Default [3.2]VBox layout behaves incorrectly

    [3.2]VBox layout behaves incorrectly


    Expected result:
    Three panels arranged vertically and taking up whole space evenly!

    Observed result:
    BLANK SCREEN, no errors..

    Code:
    Ext.onReady(function(){
        var first = new Ext.Panel({
            title:'first',
            collapsible:true,
            flex:1,
            html:'Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>'
        });
    
        var second = new Ext.Panel({
            title:'second',
            collapsible:true,
            flex:1,
            html:'Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>'
        });
    
        var third = new Ext.Panel({
            title:'third',
            collapsible:true,
            flex:1,
            html:'Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>'
        });
    
        var centerItem= new Ext.Container({
            region:'center',
            layout: {
                type:'vbox',
                align:'stretch'
            },
            items:[first, second,third]
        });
    
        var view = new Ext.Viewport({
            items:[centerItem]
        });
    });
    Last edited by Stju; 6 Apr 2010 at 2:12 PM. Reason: Resolved!

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

      0  

    Default


    STOP now.

    This ALSO is your bug.

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

      0  

    Default


    How are you HOPING that the Viewport sizes its sole child item?

  4. #4
    Sencha - Services Team Stju's Avatar
    Join Date
    Dec 2008
    Location
    Redwood city, California
    Posts
    288
    Vote Rating
    3
    Stju is on a distinguished road

      0  

    Default


    Thank's ANIMAL, don't fight !
    Code:
        var view = new Ext.Viewport({
            layout:'border',
            items:[centerItem]
        });
    Red code was missing.. too much work.. Looks like I really need some sleep..

  5. #5
    Sencha - Services Team Stju's Avatar
    Join Date
    Dec 2008
    Location
    Redwood city, California
    Posts
    288
    Vote Rating
    3
    Stju is on a distinguished road

      0  

    Default


    Okay, but when second panel is initially collpased, thed rendering is wrong..
    Code:
        var second = new Ext.Panel({
            title:'second',
            collapsible:true,
            collapsed:true,
            flex:1,
            html:'Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>'
        });
    Second observation:
    If You collapse any panel and then resize viewport - collapsed panels are excluded from laying up - see pictures.

    For me it looks like collapsed panels are excluded from layout..

  6. #6
    Ext User
    Join Date
    Apr 2007
    Posts
    38
    Vote Rating
    0
    choykawairicky is on a distinguished road

      0  

    Default


    I'm not quite sure, but I think your panel will be rendered first before putting it to your container, so maybe you need to force layout to redraw yourself.
    Code:
        var second = new Ext.Panel({
            title:'second',
            collapsible:true,
            collapsed:true,
            flex:1,
            html:'Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>'
        });
    or maybe you can write in this way,
    Code:
        var second = {
            xtype: 'panel',
            title:'second',
            collapsible:true,
            collapsed:true,
            flex:1,
            html:'Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>'
        };

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

      0  

    Default


    It's not valid to expand/collapse in a box layout.

    What's the behaviour supposed to be?

    Use a border layout.

  8. #8
    Sencha - Services Team Stju's Avatar
    Join Date
    Dec 2008
    Location
    Redwood city, California
    Posts
    288
    Vote Rating
    3
    Stju is on a distinguished road

      0  

    Default


    Supposed behavior is to achieve accordion style layout with multiple open panels, because original accordion allows to open only one at once .. , so that's why looking for workarounds..

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

      0  

    Default


    I use anchor layout for that.

    You have to anchor: '-' + Ext.getScrollBarWidth() for that to allow you to open many at once.

Thread Participants: 2

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