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

**xait** · 23 Apr 2010 7:36 AM

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;
    }

**Jamie Avins** · 23 Apr 2010 8:10 AM

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.

**joeri** · 19 May 2010 8:07 AM

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

**Jamie Avins** · 19 May 2010 8:53 AM

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

**Animal** · 19 May 2010 9:51 PM

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

**joeri** · 20 May 2010 1:32 AM

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.

**jeffers** · 3 Jun 2010 9:47 PM

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);
		}
	}
});

**Condor** · 4 Jun 2010 4:44 AM

Originally Posted by jeffers

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.

**Jamie Avins** · 4 Jun 2010 10:05 AM

Originally Posted by joeri

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

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

Thread Tools

Search Thread

Display

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

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