[2.0.x][FIXED] Resize Problem FormPanel in IE

[backoffice]

Hi,

thanks. Your code works for my simple example. But it doesn't for a more complex one:

Ext.onReady(function()
{
    // Settings
    Ext.BLANK_IMAGE_URL = '/resources/images/default/s.gif';
    
    // Formular
    var formpanel = new Ext.form.FormPanel({
        id: 'formpanel',
        region: 'center',
        labelAlign: 'top',
        layout: 'fit',
        items: [{
            "xtype": "fieldset",
            "title": "#NT#_Telefon",
            "autoHeight": true,
            "border": false,
            "collapsible": true,
            "layout": "fit",
            "items": [{
                "layout": "column",
                "border": false,
                "items": [{
                    "layout": "form",
                    "border": false,
                    "items": [{
                        "xtype": "textfield",
                        "fieldLabel": "Firstname",
                        "anchor": "90%",
                        "name": "firstname"
                    }],
                    "columnWidth": 0.5
                }, {
                    "layout": "form",
                    "border": false,
                    "items": [{
                        "xtype": "textfield",
                        "fieldLabel": "Lastname",
                        "anchor": "90%",
                        "name": "lastname"
                    }],
                    "columnWidth": 0.5
                }]
            }, {
                "layout": "column",
                "border": false,
                "items": [{
                    "layout": "form",
                    "border": false,
                    "items": [{
                        "xtype": "textfield",
                        "fieldLabel": "Street",
                        "anchor": "90%",
                        "name": "street"
                    }],
                    "columnWidth": 1.0
                }]
            }, {
                "layout": "column",
                "border": false,
                "items": [{
                    "layout": "form",
                    "border": false,
                    "items": [{
                        "xtype": "textfield",
                        "fieldLabel": "Zipcode",
                        "anchor": "90%",
                        "name": "zipcode"
                    }],
                    "columnWidth": 0.5
                }, {
                    "layout": "form",
                    "border": false,
                    "items": [{
                        "xtype": "textfield",
                        "fieldLabel": "City",
                        "anchor": "90%",
                        "name": "city"
                    }],
                    "columnWidth": 0.5
                }]
            }, {
                "layout": "column",
                "border": false,
                "items": [{
                    "layout": "form",
                    "border": false,
                    "items": [{
                        "xtype": "datefield",
                        "fieldLabel": "Birthday",
                        "anchor": "90%",
                        "name": "birthday",
                        "format": "d.m.Y"
                    }, {
                        "xtype": "timefield",
                        "fieldLabel": "Birthtime",
                        "anchor": "90%",
                        "name": "birthtime",
                        "format": "H:i:s"
                    }, {
                        "xtype": "numberfield",
                        "fieldLabel": "Numeric",
                        "anchor": "90%",
                        "name": "number"
                    }],
                    "columnWidth": 1.0
                }]
            }]
        }]
    });
    
    // Viewport
    var viewport = new Ext.Viewport({
        layout: 'border',
        items: [formpanel, {
            region: 'west',
            title: 'West',
            split: true,
            width: 200,
            minSize: 175,
            maxSize: 400,
            collapsible: true
        }, {
            region: 'east',
            title: 'East',
            split: true,
            width: 200,
            minSize: 175,
            maxSize: 400,
            collapsible: true
        }]
    });
});

Even with your fix the resize of this form doesn't work correct (in FireFox and IE). Moreover it seems that there are "spacers" created on resize which "move" the rest of the form out of the visible area. I hope that you are able to understand what i mean... my english is not as good :/ If not please try the code or ask...

Yours
backoffice

[Animal]

layout:'fit' does not support multiple items.

[Condor]

Correct, but it also shows another error:

A fieldset with border:false and collapsible:true doesn't display correctly on IE (text overlaps toggle).

[Animal]

This almost works, but you have to explicitly call Ext.getCmp("formpanel").doLayout() after resizing the regions which you should not have to do!

<!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=utf-8" />
        <title>Untitled Document</title>
        <link href="../../resources/css/ext-all.css" rel="stylesheet" type="text/css" />
        <link href="../../resources/css/xtheme-aero.css" rel="stylesheet" type="text/css" id="theme" />
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <style type="text/css">
        
        fieldset.my-fieldset table {
        	width: 100%
        }

        td.half {
        	width: 50%
        }
        </style>
        <script type="text/javascript" src="../../ext-all-debug.js"></script>

<script type="text/javascript">
	Ext.onReady(function()
	{
	    // Settings
	    Ext.BLANK_IMAGE_URL = '/resources/images/default/s.gif';
	    
	    // Formular
	    var formpanel = new Ext.form.FormPanel({
	        id: 'formpanel',
	        region: 'center',
	        labelAlign: 'top',
	        layout: 'fit',
	        items: [{
	        	cls: 'my-fieldset',
	            "xtype": "fieldset",
	            "title": "#NT#_Telefon",
	            "autoHeight": true,
	            "border": false,
	            "collapsible": true,
	            "layout": "table",
	            layoutConfig: {
	            	columns: 2
	            },
	            defaults: {
	            	border: false
	            },
                "items": [{
                	cellCls: 'half',
                    "layout": "form",
                    "border": false,
                    "items": [{
                        "xtype": "textfield",
                        "fieldLabel": "Firstname",
                        "anchor": "90%",
                        "name": "firstname"
                    }],
                }, {
                	cellCls: 'half',
                    "layout": "form",
                    "border": false,
                    "items": [{
                        "xtype": "textfield",
                        "fieldLabel": "Lastname",
                        "anchor": "90%",
                        "name": "lastname"
                    }],
                }, {
                	colspan: 2,
                    "layout": "form",
                    "border": false,
                    "items": [{
                        "xtype": "textfield",
                        "fieldLabel": "Street",
                        "anchor": "90%",
                        "name": "street"
                    }],
                }, {
                	cellCls: 'half',
                    "layout": "form",
                    "border": false,
                    "items": [{
                        "xtype": "textfield",
                        "fieldLabel": "Zipcode",
                        "anchor": "90%",
                        "name": "zipcode"
                    }]
                }, {
                	cellCls: 'half',
                    "layout": "form",
                    "border": false,
                    "items": [{
                        "xtype": "textfield",
                        "fieldLabel": "City",
                        "anchor": "90%",
                        "name": "city"
	                }]
	            }, {
	                "layout": "column",
	                colspan: 2,
	                "border": false,
	                defaults: {
	                	border: false,
	                	columnWidth: 0.333
	                },
                    "items": [{layout:'form', items: {
                        "xtype": "datefield",
                        "fieldLabel": "Birthday",
                        "anchor": "90%",
                        "name": "birthday",
                        "format": "d.m.Y"
                    }}, {layout:'form', items: {
                        "xtype": "timefield",
                        "fieldLabel": "Birthtime",
                        "anchor": "90%",
                        "name": "birthtime",
                        "format": "H:i:s"
                    }}, {layout:'form', items: {
                        "xtype": "numberfield",
                        "fieldLabel": "Numeric",
                        "anchor": "90%",
                        "name": "number"
                    }}]
	            }]
	        }]
	    });
	    
	    // Viewport
	    var viewport = new Ext.Viewport({
	        layout: 'border',
	        items: [formpanel, {
	            region: 'west',
	            title: 'West',
	            split: true,
	            width: 200,
	            minSize: 175,
	            maxSize: 400,
	            collapsible: true
	        }, {
	            region: 'east',
	            title: 'East',
	            split: true,
	            width: 200,
	            minSize: 175,
	            maxSize: 400,
	            collapsible: true
	        }]
	    });
	});
</script>
    </head>
    <body>        
    </body>

[backoffice]

Hi,

thanks again for your help.

The problem is that the "items-String" ([{.....}]) is generated automatically using an XML-File. This makes it extremly difficult (nearly impossible) for me to use your solution because i cannot say how much columns i have (and some other problems).

Is there no other working solution to use multiple items which resize correctly?

Yours
backoffice

[Animal]

I don't think so.

I think this is an area that Jack needs to revisit.

The multitude of general Layout classes are great.

That fact that we can only usefully add form Fields to layout:form Panels is bad. It means too much nesting.

All layouts should be capable of rendering Fields.

[Pagebaker]

I was facing the same problems, my tabpanel didn't get the right hight in the formpanel. As I was checking the source, I also noticed the form element wasn't the body of the formpanel.

Any idea if this will be corrected in the next release?

In meanwhile I'll use animals fix, thanks.

[Alli]

I got the same problem and I used your patch and now the panels inside the formpanel get resized accurately.
But other elemenet like TextField inside these panels don't get resized. They get bigger in width when the page is maximised but they don't get small again.

Another thing that I noticet is this although firefox work without the patch but it has this preblem too.

[Animal]

You need to tell fields how to anchor themselves using the anchor config.

FormPanels use layout:'form' and FormLayout extends AnchorLayout

http://extjs.com/deploy/dev/docs/?cl...t.AnchorLayout

[jack.slocum]

At every stage there needs to be a layout that provides dimensions or a set width in order for a lower level dimensions oriented layout (e.g. anchor layout) to work. In this case, it's the table layout that is causing issues. The table layout does not provide dimensions to components under it (the browser calculates dimensions, not the layout) so layouts don't flow through it.