Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Jul 2008
    Posts
    51
    Vote Rating
    0
    howe is on a distinguished road

      0  

    Default [CLOSED]FieldSet calculating wrong child widths ?

    [CLOSED]FieldSet calculating wrong child widths ?


    Hello all,

    Either I'm doing something very wrong here or the components inside FieldSet components get wrong rendered widths.

    Take this example:

    HTML Code:
    <html> 
      <head> 
        <title>Test FieldSet</title> 
        <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"/> 
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /> 
        <script type="text/javascript" src="ext/bootstrap.js"></script> 
        <script type="text/javascript">
          Ext.onReady(function(){
            Ext.QuickTips.init();
            Ext.create('Ext.form.Panel', {
              renderTo: 'form',
              items: [
              Ext.create('Ext.form.FieldSet', {
                title: 'Email',
                items: [
                  {
                    xtype: 'textfield',
                    name: 'email',
                    fieldLabel: 'Email',
                    vtype: 'email',
                    width: 200
                  }, 
                  {
                    xtype: 'combo',
                    fieldLabel: 'Tipo',
                    name: 'type',
                    hiddenName: 'type',
                    store: new Ext.data.SimpleStore({
                      fields: ['abbr', 'name'],
                      data: [['personal', 'Personal'], ['work', 'Word'], ['other', 'Other']]
                    }),
                    valueField: 'abbr',
                    displayField: 'name',
                    mode: 'local',
                    triggerAction: 'all',
                    lazyRender: true,
                    editable: true,
                    forceSelection: true,
                    minChars: 1,
                    selectOnFocus: true,
                    typeAhead: true,
                    anyMatch: true,
                    queryIgnoreCase: true,
                    matchWordStart: false,
                    width: 200
                  }
                ]
              })    
             ]
            })
          })  
        </script> 
      </head> 
      <body> 
        <div id="form"/> 
      </body> 
    </html>
    It gets rendered as this:



    Obviously, the component widths do not match the expected ones.

    Is this a bug or did I really do something wrong ?

    Thanks,
    Howe

  2. #2
    Sencha User ykey's Avatar
    Join Date
    Mar 2010
    Location
    USA
    Posts
    245
    Vote Rating
    27
    ykey has a spectacular aura about ykey has a spectacular aura about

      0  

    Default


    What browser was this? Your code as is looks like this to me.


  3. #3
    Sencha User
    Join Date
    Jul 2008
    Posts
    51
    Vote Rating
    0
    howe is on a distinguished road

      0  

    Default


    That was Chrome 12.0.742.30 (84361) on Ubuntu 11.04. Firefox 4.01 and Opera 11.10 will produce identical rendering; but I'm not even discussing if the components should be rendered vertically or horizontally; instead their widths seem to be wrong.

  4. #4
    Sencha User ykey's Avatar
    Join Date
    Mar 2010
    Location
    USA
    Posts
    245
    Vote Rating
    27
    ykey has a spectacular aura about ykey has a spectacular aura about

      0  

    Default


    Sorry I guess I am not sure what the problem is you are referring to. Every browser I have tried (Win7 Chrome 11/ FF 4/ IE 9) renders a fieldset's items vertically by default. Fieldsets have an anchor layout by default which you are not using in your example.

    As for fieldset items, each field's width appears to be the combination of the label and the form field. You can change the size of the field label using the labelWidth config option on the field.

    width - labelWidth = size of textbox/combobox in your example



    Code:
                            var store = Ext.create('Ext.data.SimpleStore', {
    			         fields: ['abbr', 'name'],
    			         data: [['personal', 'Personal'], ['work', 'Word'], ['other', 'Other']]
    			});
    			
    			Ext.create('Ext.form.Panel', {
    				width: 600,
    				renderTo: 'form',
    				items: [
    					{ 
    						xtype: 'fieldset',				
    						title: 'Email',
    						layout: 'auto',
    						defaults: {
    							labelWidth: 160,
    							width: 300
    						},
    						items: [
    						  {
    							xtype: 'textfield',
    							name: 'email',
    							fieldLabel: 'Email',
    							vtype: 'email'
    						  }, 
    						  {
    							xtype: 'combo',
    							fieldLabel: 'Tipo',
    							name: 'type',
    							store: store,
    							valueField: 'abbr',
    							displayField: 'name',
    							editable: true,
    							forceSelection: true,
    							minChars: 1,
    							selectOnFocus: true,
    							typeAhead: true,
                                                            width: 700
    						  }
    						]
    					}    
    				]
    			});
    Also you are using a lot of combobox properties that do not exist in 4.0.

  5. #5
    Sencha User
    Join Date
    Jul 2008
    Posts
    51
    Vote Rating
    0
    howe is on a distinguished road

      0  

    Default


    The problem here is: outside a FieldSet, [width] refers to the component width, as expected; [labelWidth]s are calculated separately. Inside a FieldSet, [width] refers to [labelWidth] + component width. That is very confusing. Is that even documented anywhere ? On 3.x that didn't happen.

    As for the combo properties, you're right, I'm porting code from 3.x and didn't finish cleaning it up, but that does not have any influence on the example.

  6. #6
    Sencha User ykey's Avatar
    Join Date
    Mar 2010
    Location
    USA
    Posts
    245
    Vote Rating
    27
    ykey has a spectacular aura about ykey has a spectacular aura about

      0  

    Default


    I see the same behavior for fields outside of a fieldset. Do you have an example?

Similar Threads

  1. Problem with layout of child components when showing a hidden Fieldset
    By parky128 in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 5 Jan 2011, 1:21 AM
  2. Replies: 2
    Last Post: 12 Nov 2010, 6:47 PM
  3. Replies: 0
    Last Post: 21 May 2010, 1:19 PM
  4. Grid column headers displayed with wrong widths in FF3 & Chrome
    By bittercoder in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 12 Jan 2009, 3:25 PM
  5. Replies: 3
    Last Post: 8 Nov 2007, 1:47 AM

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi