PDA

View Full Version : [CLOSED] Form Layout with Field Container Misalignment



rex.staples
7 May 2014, 5:06 PM
Ext version tested:
Ext 5.0.0.736


Browser versions tested against:
IE 11 Firefox 28.0 Chrome 34.0.1847.131 m


DOCTYPE tested against:
<!DOCTYPE html>


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:
https://fiddle.sencha.com/fiddle/5lo

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"

evant
7 May 2014, 5:30 PM
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.

rex.staples
7 May 2014, 6:54 PM
Adding combineLabels:true definitely fixed the alignment; however, when I add a second field to my fieldcontainer it comma-separates all the field container labels into the first field container item's label "column".


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',
combineLabels: true,
items: [{
xtype:'textfield', fieldLabel:'Address 2'
},{
xtype:'textfield', fieldLabel:'Zip'
}]
}]
}
}

})
}
});

Using combineLabels above was a nice approach and maybe what it produces in conjunction with form layout isn't a defect. I'm not trying to pick a fight with the layout manager.

Is a FieldContainer not the best way to add the same set of a half dozen form fields to various one-off Ext.form.Panels where the field container's children (assuming simple Ext.form.field.*) lay out as if they were explicitly enumerated in the Ext.form.Panel items?

As simple as this to inject the usual set of fields inline with other form fields
{
xtype: 'form',
items: [
...,
{ xtype:'ct-address' } // My.form.field.Address extends Ext.form.FieldContainer
] // to show address 1+2, city, state, zip, country, etc.
}

Thanks.

evant
7 May 2014, 7:26 PM
A field container is fine, but you still end up with the same limitations. The purpose of form layout is to go through a flat list and pick out the largest label and then size everything. If you're talking about something more complicated, then perhaps form layout isn't going to be appropriate.

Alternatively, you could configure the field container with hideEmptyLabel: false, which means it would pick up the largest other label and use that.

As far as bugs go, this one is working as intended, so I'll mark it as closed.