Results 1 to 3 of 3

Thread: Border layout is broken when resize window

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Aug 2010
    Posts
    24
    Vote Rating
    0
      0  

    Default Border layout is broken when resize window

    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.1.1

    Browser versions tested against:
    • IE8
    • FF 14.0.1 (firebug 1.10.0.1 installed)
    • Chrome 13

    DOCTYPE tested against:
    • HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"

    Description:
    • Border layout is broken when resizing window. Minimum width for center region is not taken in affect on resizing window.

    Steps to reproduce the problem:
    • Create window widget
    • Add two regions: center and east
    • Specify minWidth for center region
    • Specify maxWidth for east region
    • Resize window - make smaller width

    The result that was expected:
    • Center region width equals to minWidth|window width
    • East region has smaller width

    The result that occurs instead:
    • Layout is broken
    • Center region width is incorrectly affected by minWidth configuration

    Test Case:
    Code:
         Ext.onReady(function(){
        Ext.create('Ext.Window', {
            title: 'Bottom Header',
            width: 500,
            height: 350,
            headerPosition: 'bottom',
            layout: {
                type: 'border'
            },
            items: [{
                region: 'center',
                minWidth: 150,
                style: 'text-align: center',
                html: 'CENTER REGION',
                dockedItems: [{
                    xtype: 'toolbar',
                    dock: 'bottom',
                    items: [{
                        text: 'First'
                    },{
                        text: 'Second'
                    },{
                        text: 'Third'
                    },{
                        text: 'Fourth'
                    }]
                }]
            },{
                region: 'east',
                collapsible: true,
                width: 200,
                maxWidth: 200,
                split: true,
                style: 'text-align: right',
                html: 'RIGHT REGION'
            }]
        }).show();
    });
    HELPFUL INFORMATION
    Screenshot or Video:


    Debugging already done:
    • none

    Possible fix:
    • not provided

    Additional CSS used:
    • only default ext-all.css

    Operating System:
    • Win7
    • WinXP Pro

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,583
    Vote Rating
    873
      0  

    Default

    This isn't a bug. From the docs:

    Any Container using the Border layout must have a child item with region:'center'. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.
    If you want to restrict the size, you should place the minWidth on the window itself.
    Evan Trimboli
    Twitter - @evantrimboli

  3. #3
    Sencha User
    Join Date
    Aug 2010
    Posts
    24
    Vote Rating
    0
      0  

    Default

    Ok. Thank you for answer.

    In fact, I was expecting such response and have specified size constraints for components beforehand.

Tags for this Thread

Posting Permissions

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