Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-9305 in a recent build.
  1. #1
    Sencha User
    Join Date
    Jun 2008
    Posts
    289
    Vote Rating
    16
    Qtx will become famous soon enough

      1  

    Default [4.2.0]The anchor layout renders items wrong when the autoScroll=true and anchor=100%

    [4.2.0]The anchor layout renders items wrong when the autoScroll=true and anchor=100%


    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.2.0


    Browser versions tested against:
    • IE 10.0.9200
    • FF 19.0.2, firebug 1.11.12
    • Opera 12.14
    • Chrome 26.0.1410.43
    • Safari 5.1.7


    Description:
    • The anchor layout renders items wrong when the autoScroll=true and anchor=100% in the ExtJS 4.2.0.
    • The items do not occupy the whole width even if there is no vertical scroll bar in the ExtJS 4.2.0.
    • The behaviour in the ExtJS 4.1.0 was correct. The items occupied the whole width when there was no vertical scroll bar. If the parent was resized so that the vertical scroll bar appeared, the width of the items was reduced. If the vertical scroll bar disappeared, the freed place was again occupied by the items.


    Steps to reproduce the problem:
    • Go to the URL http://www.point-constructor.com/ext...ow/test01.html to see how it worked in ExtJS 4.1.0.
    • Push the button Layout Window. The window with the anchor layout is shown. The items occupy the whole width.
    • Reduce the height of the window. The vertical scroll bar appears. The width of the items is reduced.
    • Increase the height of the window. The vertical scroll bar disappears. The items occupy the whle width again.
    • Go to the URL http://www.point-constructor.com/ext...ow/test01.html to see how it works in ExtJS 4.2.0.
    • Push the button Layout Window. The window with the anchor layout is shown. The items occupy the whole width, although there is no vertical scroll bar.
    • Reduce the height of the window. The vertical scroll bar appears. The width of the items is not changed.
    • Increase the height of the window. The vertical scroll bar disappears. The width of the items is not changed.


    The result that was expected:
    • The items should occupy the whole available width due to the setting anchor=100%


    The result that occurs instead:
    • The items do not occupy the whole available width even if there is not vertical scroll bar.


    HELPFUL INFORMATION


    See this URL for live test case: http://

    http://www.point-constructor.com/ext...ow/test01.html
    http://www.point-constructor.com/ext...ow/test01.html

    Debugging already done:
    • none


    Possible fix:
    • not provided


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


    Operating System:
    • Windows 7

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,621
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Can you post the small test case here so I can run it locally?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jun 2008
    Posts
    289
    Vote Rating
    16
    Qtx will become famous soon enough

      0  

    Default


    Place this code into a HTML file and place this file into the examples/window

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Anchor Layout With AutoScroll</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
    
        <!-- GC -->
        <script type="text/javascript" src="../../ext-all.js"></script>
    
        <!-- Common Styles for the examples -->
        <link rel="stylesheet" type="text/css" href="../shared/example.css"/>
    
        <style type="text/css">
            .x-panel-body p {
                margin: 10px;
                font-size: 12px;
            }
        </style>
    
    <script>   
    Ext.require([
        'Ext.tab.*',
        'Ext.window.*',
        'Ext.tip.*',
        'Ext.layout.container.Border'
    ]);
    Ext.onReady(function(){
        var win,
            button = Ext.getBody().createChild({
            tag  : 'button',
            html : 'Open Window'
        });
    
        button.on('click', function(){
    
            if (!win) {
                win = Ext.create('widget.window', {
                
                    title: 'Layout Window',
                    width: 600,
                    minWidth: 350,
                    height: 350,
    
                    layout: 'anchor',
                    autoScroll: true,
                    
                    defaults: {
                      anchor: '100%'
                    },
                    
                    items: [
                      {
                        title: 'Panel 1',
                        html: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
                      },
                      {
                        title: 'Panel 2',
                        html: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
                      },
                      {
                        title: 'Panel 3',
                        html: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
                      }
                    ]
                });
            }
            button.dom.disabled = true;
            if (win.isVisible()) {
                win.hide(this, function() {
                    button.dom.disabled = false;
                });
            } else {
                win.show(this, function() {
                    button.dom.disabled = false;
                });
            }
        });
    });
    </script>   
        
    </head>
    <body>
    </body>
    </html>

  4. #4
    Sencha User
    Join Date
    Jun 2008
    Posts
    289
    Vote Rating
    16
    Qtx will become famous soon enough

      0  

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,621
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

    I could reproduce using Firefox but not Chrome. In Firefox I got a scrollbar and when I resized the window to be a little taller to not get the scrollbar is when I saw the space which I do not see in 4.1.0 so this bug is confirmed.

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

      0  

    Default


    You can repro it in chrome by going to anchor layout in the api docs and changing the width to 100% on the first panel and adding autoScroll: true to the top config.

  7. #7
    Sencha - Ext JS Dev Team
    Join Date
    Jun 2011
    Location
    San Diego, CA
    Posts
    179
    Vote Rating
    35
    nohuhu has a spectacular aura about nohuhu has a spectacular aura about

      0  

    Default


    This bug is already taken care of and awaits its turn to be merged in.

    Regards,
    Alex.

  8. #8
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    108
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  9. #9
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    5
    Vote Rating
    1
    towler is on a distinguished road

      0  

    Default


    Any chance of getting a patch/override to fix it temporarily?

  10. #10
    Sencha User
    Join Date
    Jun 2008
    Posts
    289
    Vote Rating
    16
    Qtx will become famous soon enough

      0  

    Default


    It is a really bad bug. It messed up many of my forms. I have to switch everywhere from anchor layout to the vbox layout to solve the problem.