Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: [SOLVED]3.1.1 vbox layout resizing issue

  1. #1
    Ext JS Premium Member
    Join Date
    Dec 2008
    Posts
    33

    Default [SOLVED]3.1.1 vbox layout resizing issue

    NOW WORKING!
    Remeber to stretch!

    Ext version tested:


    • Ext 3.1.1



    Adapter used:

    • ext



    css used:

    • only default ext-all.css





    Browser versions tested against:

    • IE8
    • FF3.0.18 (firebug 1.4.5 installed)
    • Safari 4.0.3



    Operating System:

    • WinXP Pro



    Description:

    • Doing a window resize or resizing/collapsing west region in viewport results in that the vbox panel in center dont resize correctly leaving space blank and removing collapse tool.



    Test Case:

    Code:
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title id='title'>Title</title>
     
            <!-- ** CSS ** -->
            <!-- base library -->
            <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
     
            <!-- overrides to base library -->
     
     
            <!-- ** Javascript ** -->
            <!-- base library -->
            <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
            <script type="text/javascript" src="../../ext-all-debug.js"></script>
     
     
            <!-- overrides to base library -->
     
            <!-- extensions -->
     
            <!-- page specific -->
     
            <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
     
            Ext.onReady(function(){
                new Ext.Viewport({
                    layout: 'border',
                    items: [ {
                        region: 'west',
                        collapsible: true,
                        title: 'Navigation',
                        split: true,
                        width: 200,
                        html:'test west'
    
                    }, {
                        region: 'south',
                        title: 'Title for Panel',
                        collapsible: true,
                        html: 'Information goes here',
                        split: true,
                        height: 100,
                        minHeight: 100
                    }, {
                        region: 'center',
                        xtype: 'panel', // TabPanel itself has no title
                        layout:'vbox',
                        layoutConfig: {
                            align:'stretch'
                        },
                        id:'resizeme',
                        tbar:[{text:'doLayout on center region',handler:function(){Ext.getCmp('resizeme').doLayout();}}],                    
                        items: [{
                            title: 'Panel 1',
                            xtype: 'panel',
                            layout:'fit',
                            flex:1,                        
                            html: 'The first content. '                        
                        },{
                            title: 'Panel 2',
                            xtype: 'panel',
                            layout:'fit',
                            collapsible:true,                        
                            flex:3,
                            html: 'The second content.'
                        }]
                    }]
                }); 
     
            }); //end onReady
            </script>
     
        </head>
        <body>
        </body>
    </html>
    See this URL : http://212.247.89.25/extdebug/ext-3....n-stretch.html

    Steps to reproduce the problem:

    • Load page in a browserwindow that is less then fullscreen, rostore window to full screen, vbox items doesnt resize automatically, fix by using button in tbar
    • Load page and collapse westpanel or make west panel smaller



    The result that was expected:

    • That the vbox items should resize automatically as they do when expanding west region



    The result that occurs instead:

    • The vbox / center panels get cut of and leaving a blank space



    Screenshot or Video:

    • attached



    Debugging already done:

    • Tested doLayout manually using the button in tbar



    Possible fix:

    • See Animals hint in #8 regarding border layout
    Attached Images Attached Images
    Last edited by Animal; 24 Feb 2010 at 3:41 AM. Reason: Completed with codefix, now its working remeber to stretch!

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    You are not asking for the boxes to have their width managed. What's it supposed to do, read your mind?

  3. #3
    Ext JS Premium Member
    Join Date
    Dec 2008
    Posts
    33

    Default Asking it to be resized

    Hi Animal,
    Thank you for your reply.
    Setting the viewport to monitorResize:true takes cares of the window resizing
    but not of the west collapse issue.

    Of course I can set a listener and trigger a doLayout on the center region. Just thought that it should be done automatically. I've also tried setting autoWidth:true but that doesnt work either. Do you perhaps some mindreading tricks?
    Cheers
    Axpa

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Viewport already monitors browser resize, and lays itself out on resize events.

    http://www.extjs.com/deploy/dev/docs...out.VBoxLayout

  5. #5
    Ext JS Premium Member
    Join Date
    Dec 2008
    Posts
    33

    Default Examples on a server

    Hi Animal,
    Thanks again for your feedback.
    I've found a server that I could post some tests on.

    The first as supplied in this first entry.
    http://212.247.89.25/extdebug/ext-3....bug/debug.html

    Adding a monitorResize:true on viewport (yes I know it should do it from the getgo, but do you see the difference?)
    http://212.247.89.25/extdebug/ext-3....torresize.html

    After a rtfm again from your supplied link I see the align:'stretch' as a good candidate.
    Heres first my original code with align:'stretch' on vbox panel.
    http://212.247.89.25/extdebug/ext-3....n-stretch.html
    That doesnt work when collapsing the west region, problem persist.

    Combining align:'stretch' and viewport monitorResize:true
    http://212.247.89.25/extdebug/ext-3....p-monitor.html

    Now you can resize window and it resizes the vbox items. But collapse/expand west still is a no go, still needs a doLayout.

    Any more mindreading tricks up your sleave?
    Cheers
    Axpa

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Right. Your code in http://212.247.89.25/extdebug/ext-3....n-stretch.html is correct. It uses align: 'stretch' to request that they are fitted widthwise.

    It should not need to perform an explicit doLayout on the center region for it to lay out properly. This is a bug.

  7. #7
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Do you want to change post 1 to illustrate the correctly configured Viewport not working and have me move this thread back into the Bugs folder, or repost a new thread?

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    In fact it is a bug in border layout.

    Expanding/Collapsing has been changed to doLayout on the collapsed Panel instead of going one generation up, and calling doLayout on that. I remember seeing that change go in and thinking it was dodgy, but assuming that it must be for a reason...

  9. #9
    Ext JS Premium Member
    Join Date
    Dec 2008
    Posts
    33

    Default I'll edit the first example

    Hi Animal,
    Thanks for a great help, I'll edit the first to reflect correct code then you can change it into a bug report in bug thread.
    Cheers
    Jimmy

  10. #10
    Ext JS Premium Member
    Join Date
    Dec 2008
    Posts
    33

    Default Move back to bugs please

    Hi Animal,
    Please move it back to bugs.
    Best regards
    Axpa

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •