1. #1
    Sencha Premium Member
    Join Date
    Feb 2008
    Posts
    53
    Vote Rating
    0
    backoffice is on a distinguished road

      0  

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

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


    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

  2. #2
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    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

  3. #3
    Sencha Premium Member
    Join Date
    Feb 2008
    Posts
    53
    Vote Rating
    0
    backoffice is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    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


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

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

      0  

    Default


    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.

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    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


    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.

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

      0  

    Default


    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.

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

      0  

    Default


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

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

      0  

    Default


    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;

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

      0  

    Default


    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.