Results 1 to 3 of 3

Thread: vbox layout stretches correctly on IE, but on on FF

  1. #1
    Sencha User lsaffre's Avatar
    Join Date
    Aug 2009
    Location
    Estonia
    Posts
    34
    Vote Rating
    0
      0  

    Default vbox layout stretches correctly on IE, but on on FF

    Hi all,

    I hope for your help with a layout problem.

    Please have a look at the Source code of the showcase that demonstrates my problem.
    It opens a Window with a single item (a FormPanel) with vbox layout and 3 items; the third item (which contains a htmleditor) has stretch:1, the others have stretch:0. My problem is that the second item (country, region and email) takes too much height. At least when using Firefox:

    Here is a screenshot of the result (Firefox 3.6.3 on Windows XP) : On IE the same showcase renders as expected:
    I'm using ExtJS version 3.2.1.

    Am I doing something forbidden? Is there a workaround for this problem?

    Thanks for any hint!
    Luc

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,370
    Vote Rating
    1515
      0  

    Default

    try this:

    Code:
    var form = new Ext.form.FormPanel({
    					labelAlign: "top",
    					frame: true,
    					width: 400,
    					height: 400,
    					items: [{
    						layout: "column",
    						items:[{
    							columnWidth: .6,
    							layout: "form",
    							items: [{
    								xtype: "textfield",
    								allowBlank: false,
    								fieldLabel: "name",
    								anchor: "100%",
    								name: "name",
    								maxLength: 200
    							},{
    								xtype: "panel",
    								layout: "column",
    								items: [{
    									columnWidth: .3,
    									layout: "form",
    									items: [{
    										xtype: "textfield",
    										allowBlank: false,
    										fieldLabel: "country",
    										anchor: "100%",
    										name: "country",
    										maxLength: 200
    									}]
    								},{
    									columnWidth: .7,
    									layout: "form",
    									items: [{
    										xtype: "textfield",
    										maxLength: 200,
    										fieldLabel: "region",
    										anchor: "100%",
    										name: "region"
    									}]
    								}]
    							}]
    						},{
    							columnWidth:.4,
    							layout: "form",
    							items: [{
    								xtype: "textfield",
    								maxLength: 200,
    								fieldLabel: "national id",
    								anchor: "100%",
    								name: "national_id"
    							},{
    								xtype: "textfield",
    								fieldLabel: "email",
    								anchor: "100%",
    								name: "email",
    								vtype: "email"
    							}]
    						}]
    					},{
    						xtype: "htmleditor",
    						fieldLabel: "remarks",
    						name: "remarks",
    						anchor: "100% 100%"
    					}]
    				});
    				
    				var win = new Ext.Window({
    					title: "Insert into Companies",
    					width: 400,
    					height: 400,
    					layout: "fit",
    					items: form
    				}).show();
    Tested on IE8, FF3.6, and Chrome5 on Win7 64bit and they all look identical.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User lsaffre's Avatar
    Join Date
    Aug 2009
    Location
    Estonia
    Posts
    34
    Vote Rating
    0
      0  

    Default

    Thank you, Mitchell. Yes, your code is a workaround for this special form. You get a working form by changing the structure of the components used. Unfortunately I need a more general solution because this example was only a simplified case. I'd say that this is obviously a bug since my code produces different results on FF and on IE. Any opinions on whether this is a bug worth being reported? I've not much time right now, but I'll do what I can to isolate the problem and file a bug report.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •