ExtJS 同行表单域对齐有误处理办法

更新记录

2022年5月29日 第一次编辑。使用的ExtJS版本：ExtJS 7.4

问题

原本都是显示正常的表单域，比如这些文本框、选择框都是正常。

在用户进行操作，然后显示验证提示后，明显出现了问题。

解决办法

使用开发者工具查看DOM结构发现后，是对齐的问题。

如果您使用的是HBox布局，请将垂直对齐设置为顶部对齐。具体代码如下：

 layout: {
    type: 'hbox',
    pack: 'center',
    align: 'begin',  //重点：设置垂直对齐方式为顶部对齐。
 },

如果使用的是Table布局，请将垂直对齐也一样设置为顶部对齐。具体代码如下：

layout: {
    type: 'table',
    columns: 2,
    tableAttrs: {
        style: {
            width: '100%',
        },
    },
    tdAttrs: {
        valign: 'top',   //重点：设置<td>元素的内容为顶部对齐。
    }
},

最终效果如下，这样就不影响同行的其他表单域：