Hybrid View

    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
    19
    Vote Rating
    0
    GothAr is on a distinguished road

      0  

    Default Border layout is broken when resize window

    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
    16,927
    Vote Rating
    636
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      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
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User
    Join Date
    Aug 2010
    Posts
    19
    Vote Rating
    0
    GothAr is on a distinguished road

      0  

    Default


    Ok. Thank you for answer.

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

Thread Participants: 1

Tags for this Thread