Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    May 2009
    Posts
    13
    Vote Rating
    0
    xait is on a distinguished road

      0  

    Default [DEFER]FormLayout does not account for vertical scrollbar width when calulating width

    [DEFER]FormLayout does not account for vertical scrollbar width when calulating width


    Ext version tested:
    • Ext 3.2

    Adapter used:
    • ext

    css used:
    • only default ext-all.css

    Browser versions tested against:
    • IE7
    • IE8
    • FF3.6.3

    Operating System:
    • Ubuntu
    • WinXP Pro

    Description:
    • We found that the form layout does not take into account scrollbar width when calculating width
      of the HTML input field.

    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.Window({
    		        title : 'The Window',
    		        layout: 'fit',
    		        height: 150,
    		        width: 500,
    
    		        items: new Ext.FormPanel({
    		             autoScroll: true,
    		            title: 'Simple Form',
    		            labelWidth: 80,
    		            labelPad: 20,
    
    		            defaults: {anchor: '100%'},
    		            defaultType: 'textfield',
    
    		            items: [{
    		                    fieldLabel: 'First Name',
    		                    name: 'first',
    		                    allowBlank:false
    		                },{
    		                    fieldLabel: 'Last Name',
    		                    name: 'last'
    		                },{
    		                    fieldLabel: 'Company',
    		                    name: 'company'
    		                }, {
    		                    fieldLabel: 'Email',
    		                    name: 'email',
    		                    vtype:'email'
    		                }
    		            ]
    		        })
    		    }).show();
            }); //end onReady
            </script>
    
        </head>
        <body>
        </body>
    </html>

    Steps to reproduce the problem:
    • just open the page

    Screenshots
    The result that was expected:
    After Fix.jpg

    The result that occurs instead:
    Before Fix.jpg

    Debugging already done:
    Found current Layout Code:
    Code:
    adjustWidthAnchor: function(value, c){
        if(c.label && !this.isHide(c) && (this.container.labelAlign != 'top')){
            var adjust = Ext.isIE6 || (Ext.isIE && !Ext.isStrict);
            return value - this.labelAdjust + (adjust ? -3 : 0);
        }
        return value;
    }
    Possible fix:
    Code:
        adjustWidthAnchor: function(value, c){
            if(c.label && !this.isHide(c) && (this.container.labelAlign != 'top')){
                var el = c.getItemCt().child('.x-form-element');
                if (el) {
                    return el.getWidth(true);
                }else {
                    var adjust = Ext.isIE6 || (Ext.isIE && !Ext.isStrict);
                    return value - this.labelAdjust + (adjust ? -3 : 0);
                }
            }
            return value;
        }

  2. #2
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    21
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    This is correct, it have never done this. We are looking to implement a fix for this with 3.3 and it is already in svn and being tested. The fix is a bit more involved than the one you are using and it's actually in the anchor layout which form layout is derived from.

  3. #3
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Antwerp, Belgium
    Posts
    555
    Vote Rating
    27
    joeri has a spectacular aura about joeri has a spectacular aura about joeri has a spectacular aura about

      0  

    Default


    I'm actually stuck on this bug. Is there a quick fix I could apply to work around it?

  4. #4
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    21
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    You can nest another container as a wrapper and scroll on it instead.

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

      0  

    Default


    Easiest workaround is to use anchor: '-25' to clear the space for a scrollbar.

  6. #6
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Antwerp, Belgium
    Posts
    555
    Vote Rating
    27
    joeri has a spectacular aura about joeri has a spectacular aura about joeri has a spectacular aura about

      0  

    Default


    Thanks Animal, works well enough for now. I'll probably ship this code on Ext 3.3 anyway.

    @Jamie Avins: when you report a fix in svn, could you please include the revision? If I knew exactly what code fixes it I could extract an override.

  7. #7
    Ext User
    Join Date
    May 2007
    Posts
    2
    Vote Rating
    0
    jeffers is on a distinguished road

      0  

    Default


    In my project,I'm using code behind to solve this problem
    Code:
    Ext.override(Ext.layout.AnchorLayout, {
    	onLayout : function(ct, target) {
    		Ext.layout.AnchorLayout.superclass.onLayout.call(this, ct, target);
    		var size = this.getLayoutTargetSize();
    
    		var w = size.width, h = size.height;
    
    		if (w < 20 && h < 20) {
    			return;
    		}
    
    		// find the container anchoring size
    		var aw, ah;
    		if (ct.anchorSize) {
    			if (typeof ct.anchorSize == 'number') {
    				aw = ct.anchorSize;
    			} else {
    				aw = ct.anchorSize.width;
    				ah = ct.anchorSize.height;
    			}
    		} else {
    			aw = ct.initialConfig.width;
    			ah = ct.initialConfig.height;
    		}
    
    		var cs = this.getRenderedItems(ct), len = cs.length, i, c, a, cw, ch, el, vs, boxes = [];
    		for (i = 0; i < len; i++) {
    			c = cs[i];
    			el = c.getPositionEl();
    
    			// If a child container item has no anchor and no specific width,
    			// set the child to the default anchor size
    			if (!c.anchor && c.items && !Ext.isNumber(c.width)
    					&& !(Ext.isIE6 && Ext.isStrict)) {
    				c.anchor = this.defaultAnchor;
    			}
    
    			if (c.anchor) {
    				a = c.anchorSpec;
    				if (!a) { // cache all anchor values
    					vs = c.anchor.split(' ');
    					c.anchorSpec = a = {
    						right : this.parseAnchor(vs[0], c.initialConfig.width,
    								aw),
    						bottom : this.parseAnchor(vs[1],
    								c.initialConfig.height, ah)
    					};
    				}
    				cw = a.right ? this.adjustWidthAnchor(a.right(w)
    								- el.getMargins('lr'), c) : undefined;
    				ch = a.bottom ? this.adjustHeightAnchor(a.bottom(h)
    								- el.getMargins('tb'), c) : undefined;
    
    				if (cw || ch) {
    					boxes.push({
    								comp : c,
    								width : cw || undefined,
    								height : ch || undefined
    							});
    				}
    			}
    		}
    		var totalHeight = 0;
    		for (i = 0, len = boxes.length; i < len; i++) {
    			c = boxes[i];
    			totalHeight += c.height || c.comp.getHeight();
    		}
    		if (totalHeight > h && ct.autoScroll) {
    			for (i = 0, len = boxes.length; i < len; i++) {
    				boxes[i].width-=25;
    			}
    		}
    		for (i = 0, len = boxes.length; i < len; i++) {
    			c = boxes[i];
    			c.comp.setSize(c.width, c.height);
    		}
    	}
    });

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    83
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Quote Originally Posted by jeffers View Post
    In my project,I'm using code behind to solve this problem
    1. I would recommend using Ext.getScrollOffset() instead of 25.
    2. This doesn't work if you have components that can change height (e.g. collapsible fieldsets).

    There is no event triggered when the content of an overflow:auto element grows and a scrollbar becomes visible. Apart from polling (BAD!), I don't see a way to make AnchorLayout support dynamic scrollbars.

    IMHO the only thing that should be added to AnchorLayout is a scrollOfset config option, like ColumnLayout and BoxLayout already have.

  9. #9
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    21
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Quote Originally Posted by joeri View Post
    Thanks Animal, works well enough for now. I'll probably ship this code on Ext 3.3 anyway.

    @Jamie Avins: when you report a fix in svn, could you please include the revision? If I knew exactly what code fixes it I could extract an override.
    I commited this to 3.3.x quite a while back.

    03/24/2010 05:30:07 PM
    SVN 6381 and cleaned up the var names in 6389