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
    4
    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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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,483
    Vote Rating
    35
    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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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,483
    Vote Rating
    35
    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,483
    Vote Rating
    35
    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,483
    Vote Rating
    35
    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,483
    Vote Rating
    35
    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.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar