javascript - Ext.form.Panel、Ext 5、对齐标签和字段

Question

我正在使用 Ext.form.Panel ，其配置如下:

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

在此表单中，我有许多 textfield 类型组件，每个组件都有相应的标签。除了标签和名称之外，配置是相同的，如下所示:

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

我想对齐输入字段，而不一定是标签(如关于 .Net Framework 的 this question 中所示)；但是，我的输入字段正在对齐，如下所示:

许多 SO 帖子建议对 FormPanel 使用 labelAlign 配置；但是，它不是 Ext JS 5 中 Ext.form.Panel 的可用配置(我不知道它以前什么时候可用)。如果我尝试配置它，该配置将被忽略。我在现场和面板层面都进行了尝试。

是否可以将上述字段左对齐？ Sencha 论坛上的其他人建议使用 fieldset；但是，这也没有上述配置。

Answer 1

您可以使用form布局:

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

参见工作示例:https://fiddle.sencha.com/#fiddle/ls5

<小时/>

或者您可以使用 anchor布局:

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

参见工作示例:https://fiddle.sencha.com/#fiddle/ls7