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

**backoffice** · 28 Feb 2008 1:21 AM

Hi,

i have already posted my problem in the Help-Forum. Because i didn't get a reply i think that it is a bug in ExtJS. Code snippet and further information are in this thread:

http://extjs.com/forum/showthread.php?t=25454

Thanks for your help!

Yours
backoffice

**mystix** · 28 Feb 2008 1:39 AM

a FormPanel isn't a valid BorderLayout.Region.

you should create a normal center region and place the FormPanel into the center Region's items config.

scratch that in favour of this thread:
http://extjs.com/forum/showthread.php?t=25454

**backoffice** · 28 Feb 2008 1:53 AM

Hi,

first of all thanks for your help.

I changed my code as you said:

Code:

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',
        items: [{
            layout: 'column',
            border: false,
            items: [{
                layout: 'form',
                border: false,
                columnWidth: 0.5,
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'form.firstname',
                    width: '90%',
                    name: 'firstname'
                }]
            }, {
                layout: 'form',
                border: false,
                columnWidth: 0.5,
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'form.lastname',
                    width: '90%',
                    name: 'lastname'
                }]
            }]
        }]
    });
    
    // Viewport
    var viewport = new Ext.Viewport({
        layout: 'border',
        items: [{
            region: 'center',
            title: 'Center',
            split: true,
            items: [formpanel],
            listeners: {
                resize: function(panel, adjWidth, adjHeight, rawWidth, rawHeight)
                {
                    panel.doLayout();
                }
            }
        }, {
            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
        }]
    });
});

This again works fine in FireFox but not in IE. The FormPanel does not resize.

Yours
backoffice

**Condor** · 28 Feb 2008 3:37 AM

Your example is missing a layout:'fit' in the id:'formpanel' panel and in the title:'Center' panel.

But you could also simply remove the 2 panels, e.g.

Code:

var formpanel = new Ext.form.FormPanel({
	region: 'center',
	title: 'Center',
	split: true,
	id: 'formpanel',
	labelAlign: 'top',
	layout: 'column',
	border: false,
	items: [{
		layout: 'form',
		border: false,
		columnWidth: 0.5,
		items: [{
			xtype: 'textfield',
			fieldLabel: 'form.firstname',
			width: '90%',
			name: 'firstname'
		}]
	}, {
		layout: 'form',
		border: false,
		columnWidth: 0.5,
		items: [{
			xtype: 'textfield',
			fieldLabel: 'form.lastname',
			width: '90%',
			name: 'lastname'
		}]
	}]
});

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

**Animal** · 28 Feb 2008 4:12 AM

I think there's still a problem with just IE. Just drop this file into examples/layout:

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=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>
        <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: [{
	            layout: 'column',
	            border: false,
	            items: [{
	                layout: 'form',
	                border: false,
	                columnWidth: 0.5,
	                items: [{
	                    xtype: 'textfield',
	                    fieldLabel: 'form.firstname',
	                    anchor: '90%',
	                    name: 'firstname'
	                }]
	            }, {
	                layout: 'form',
	                border: false,
	                columnWidth: 0.5,
	                items: [{
	                    xtype: 'textfield',
	                    fieldLabel: 'form.lastname',
	                    anchor: '90%',
	                    name: 'lastname'
	                }]
	            }]
	        }]
	    });
	    
	    // 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>

The center FormPanel does not resize its 0.5 with columns. Firefox works fine.

**Condor** · 28 Feb 2008 4:37 AM

Indeed, if you set layout:'fit' for a FormPanel the body <div> is set to the correct height, but the <form> element doesn't get resized.

ps. Either use layout:'form' or remove the extra nesting.

**Animal** · 28 Feb 2008 5:52 AM

Yes, I see that if you change it from a FormPanel to a Panel, then it works. But of course you don't get a <form> then. I'm going to have to look deeper into this. It should work. So what if it' a FormPanel? It should lay itself out properly.

**Animal** · 28 Feb 2008 5:55 AM

Really, and FormPanel's body element should be a <form>, not a <div> with a <form> inside it.

**Animal** · 28 Feb 2008 6:04 AM

Yep.

If you change the Ext.form.FormPanel class to the below, then it works:

Code:

Ext.FormPanel = Ext.extend(Ext.Panel, {
	/**
	 * @cfg {String} formId (optional) The id of the FORM tag (defaults to an auto-generated id).
	 */
    /**
     * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
     */
    /**
     * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
     */
    /**
     * @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "center")
     */
    buttonAlign:'center',

    /**
     * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75)
     */
    minButtonWidth:75,

    /**
     * @cfg {String} labelAlign Valid values are "left," "top" and "right" (defaults to "left").
     * This property cascades to child containers if not set.
     */
    labelAlign:'left',

    /**
     * @cfg {Boolean} monitorValid If true the form monitors its valid state <b>client-side</b> and
     * fires a looping event with that state. This is required to bind buttons to the valid
     * state using the config value formBind:true on the button.
     */
    monitorValid : false,

    /**
     * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
     */
    monitorPoll : 200,

    /**
     * @cfg {String} layout @hide
     */
    layout: 'form',
    
    // private
    initComponent :function(){

        this.form = this.createForm();
    	this.bodyCfg = {
            tag: 'form',
            cls: 'x-panel-body',
            method : this.method || 'POST',
            id : this.formId || Ext.id()
        };
        if(this.fileUpload) {
            this.bodyCfg.enctype = 'multipart/form-data';
        }
        
        Ext.FormPanel.superclass.initComponent.call(this);

        this.addEvents(
            /**
             * @event clientvalidation
             * If the monitorValid config option is true, this event fires repetitively to notify of valid state
             * @param {Ext.form.FormPanel} this
             * @param {Boolean} valid true if the form has passed client-side validation
             */
            'clientvalidation'
        );

        this.relayEvents(this.form, ['beforeaction', 'actionfailed', 'actioncomplete']);
    },

    // private
    createForm: function(){
        delete this.initialConfig.listeners;
        return new Ext.form.BasicForm(null, this.initialConfig);
    },

    // private
    initFields : function(){
        var f = this.form;
        var formPanel = this;
        var fn = function(c){
            if(c.doLayout && c != formPanel){
                Ext.applyIf(c, {
                    labelAlign: c.ownerCt.labelAlign,
                    labelWidth: c.ownerCt.labelWidth,
                    itemCls: c.ownerCt.itemCls
                });
                if(c.items){
                    c.items.each(fn);
                }
            }else if(c.isFormField){
                f.add(c);
            }
        }
        this.items.each(fn);
    },

    // private
    getLayoutTarget : function(){
        return this.form.el;
    },

    /**
     * Provides access to the {@link Ext.form.BasicForm Form} which this Panel contains.
     * @return {Ext.form.BasicForm} The {@link Ext.form.BasicForm Form} which this Panel contains.
     */
    getForm : function(){
        return this.form;
    },

    // private
    onRender : function(ct, position){
        this.initFields();

        Ext.FormPanel.superclass.onRender.call(this, ct, position);
        this.form.initEl(this.body);
    },
    
    // private
    beforeDestroy: function(){
        Ext.FormPanel.superclass.beforeDestroy.call(this);
        Ext.destroy(this.form);
    },

    // private
    initEvents : function(){
        Ext.FormPanel.superclass.initEvents.call(this);
		this.items.on('remove', this.onRemove, this);
		this.items.on('add', this.onAdd, this);
        if(this.monitorValid){ // initialize after render
            this.startMonitoring();
        }
    },
    
    // private
	onAdd : function(ct, c) {
		if (c.isFormField) {
			this.form.add(c);
		}
	},
	
	// private
	onRemove : function(c) {
		if (c.isFormField) {
			Ext.destroy(c.container.up('.x-form-item'));
			this.form.remove(c);
		}
	},

    /**
     * Starts monitoring of the valid state of this form. Usually this is done by passing the config
     * option "monitorValid"
     */
    startMonitoring : function(){
        if(!this.bound){
            this.bound = true;
            Ext.TaskMgr.start({
                run : this.bindHandler,
                interval : this.monitorPoll || 200,
                scope: this
            });
        }
    },

    /**
     * Stops monitoring of the valid state of this form
     */
    stopMonitoring : function(){
        this.bound = false;
    },

    /**
     * This is a proxy for the underlying BasicForm's {@link Ext.form.BasicForm#load} call.
     * @param {Object} options The options to pass to the action (see {@link Ext.form.BasicForm#doAction} for details)
     */
    load : function(){
        this.form.load.apply(this.form, arguments);  
    },

    // private
    onDisable : function(){
        Ext.FormPanel.superclass.onDisable.call(this);
        if(this.form){
            this.form.items.each(function(){
                 this.disable();
            });
        }
    },

    // private
    onEnable : function(){
        Ext.FormPanel.superclass.onEnable.call(this);
        if(this.form){
            this.form.items.each(function(){
                 this.enable();
            });
        }
    },

    // private
    bindHandler : function(){
        if(!this.bound){
            return false; // stops binding
        }
        var valid = true;
        this.form.items.each(function(f){
            if(!f.isValid(true)){
                valid = false;
                return false;
            }
        });
        if(this.buttons){
            for(var i = 0, len = this.buttons.length; i < len; i++){
                var btn = this.buttons[i];
                if(btn.formBind === true && btn.disabled === valid){
                    btn.setDisabled(!valid);
                }
            }
        }
        this.fireEvent('clientvalidation', this, valid);
    }
});
Ext.reg('form', Ext.FormPanel);

Ext.form.FormPanel = Ext.FormPanel;

**Animal** · 28 Feb 2008 6:28 AM

Actually, this bug was biting me in a project I did recently. I needed a FormPanel because it had to have one, overarching <form>

But it's layout was 'fit, and because the body <div> got resized, but the embedded <form> did not, the layout didn't work.

The fix above needs to be put in. I've tested it with examples/form/dynamic.js, and it seems to work well.

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

Thread Tools

Search Thread

Display

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

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