Ext.form.Panel, Ext 5, Align Labels and Fields

Question

I am utilizing an Ext.form.Panel , it's configurations are as follows:

defaultType : 'textfield',
layout      : 'auto',
height      : '60%',
width       : '40%',
floating    : true,
modal       : true,
renderTo    : Ext.getBody(),
closeAction : 'destroy', // default; invoked via the .close() method

Within this form, I have a number of textfield type components, each with a corresponding label. The configuration, beyond their label and name, is identical and is as follows:

 fieldLabel : 'Dimension Label',
 name       : 'dimensionLabel',
 labelWidth : '400px', // to exagerate the label size
 padding    : '10px'

I would like to align the input fields, not necessarily the label (as demonstrated in this question regarding the .Net Framework); however, my input fields are aligning, as follows:

A number of SO posts suggest the labelAlign configuration for the FormPanel ; however, it is not an available configuration for the Ext.form.Panel in Ext JS 5 (I don't know when it was previously available). If I attempt to configure it, the configuration is ignored. I have tried both on the field and panel level.

Is it possible to align the above fields on the left? Someone else on the Sencha forums suggest utilizing a fieldset ; however, this also does not have the above mentioned configuration.

Answer 1

You can use the form layout:

This is a layout that will render form Fields, one under the other all stretched to the Container width.

See working example: https://fiddle.sencha.com/#fiddle/ls5

---

Alternatively you can use the anchor layout:

This is a layout that enables anchoring of contained elements relative to the container's dimensions.

See working example: https://fiddle.sencha.com/#fiddle/ls7