Form Layout with Field Container Misalignment

1. 
   

   Thank you for reporting this bug. We will make it our priority to review this report.

   
   


2. 
   
   
   

   
   

   
   

   Form Layout with Field Container Misalignment

   
   

   
   

   Form Layout with Field Container Misalignment

   
   
   
   

   
   

   Ext version tested:
   

   Browser versions tested against:

   
   

   
   
   • IE 11
   
   
   • Firefox 28.0
   
   
   • Chrome 34.0.1847.131 m
   
   

   
   

   DOCTYPE tested against:

   
   

   Description:

   
   

   
   
   • An Ext.form.Panel with a layout specified as 'form' fails to calculate the label widths of its Ext.form.FieldContainer children and the form is misaligned.
   
   

   
   

   Steps to reproduce the problem:

   
   

   
   
   • http://ift.tt/1iYUWrf
     
     
     

     Code:

     
     

     
     Ext.application({
         name : 'Fiddle',
     
         launch : function() {
             Ext.widget('viewport', {
                 renderTo: document.body,
     
                 layout: 'border',
             
                 items: {
                     region: 'center',
                     xtype: 'panel',
                     items: {
                         padding: 5,
                         xtype: 'form',
                         layout: 'form',
                         items: [{
                             xtype:'textfield', fieldLabel:'Name'
                         },{
                             xtype:'fieldcontainer',
                             items: {
                                 xtype:'textfield', fieldLabel:'City'
                             }
                         }]
                     }
                 }
     
             })
         }
     });
     

     
     
   
   

   
   

   The result that was expected:

   
   

   
   
   • Layout manager will auto-measure the label widths for me and make every label as large as the largest one
   
   

   
   

   The result that occurs instead:

   
   

   
   
   • Field container child items (label + input) render in the field label "column"
   
   

   
   

   
   

   
   

   
   

   
   

   
   
   
   

   ---



3. 
   
   
   

   
   

   
   

   

   
   

   
   

   
   
   
   

   
   

   I don't think this is a bug. The FieldContainer can contain anything, form fields or otherwise. For example, what should the behaviour be when I have 3 fields inside a field container in an hbox layout? What about a button, a panel and a field in a vbox layout?
   

   Perhaps you want the combineLabels config so it pulls them out into the FieldContainer itself.

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   Evan Trimboli
   
   Sencha Developer
   
   Twitter - @evantrimboli
   
   Don't be afraid of the source code!

   
   

   
   

   
   

   
   
   
   

   ---