Ext.form.Panel，分机 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'

我想对齐输入字段，不一定是标签（如 this question 关于 .Net Framework 中所示）；但是，我的输入字段是对齐的，如下所示：

许多 SO 帖子建议 labelAlign 配置 FormPanel；但是，它不是 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

Ext.form.Panel，分机 5，对齐标签和字段

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

javascript

extjs

extjs5