如何在 AEM 对话框的一行中创建文本字段（经典 UI）

Question

在上面的字段中有 2 行。我希望他们两个排成一排。

使用的代码是：

<provinces jcr:primaryType="cq:Widget" fieldLabel="Province List" name="./provinces" xtype="multifield">
<fieldConfig
    jcr:primaryType="cq:Widget"
    xtype="multifieldpanel">
    <items jcr:primaryType="cq:WidgetCollection">
        <code
            jcr:primaryType="cq:Widget"
            fieldLabel="Code"
            key="code"
            xtype="textfield"/>
        <name
            jcr:primaryType="cq:Widget"
            fieldLabel="Name"
            key="name"
            xtype="textfield"/>
    </items>
</fieldConfig>

Answer 1

您应该为您的多字段使用hbox 布局。将layout="hbox" 添加到具有xtype="multifieldpanel" 的节点，它应该可以工作。

在我的 AEM 6.3 本地实例上测试

您的特定对话框代码变为：

<fieldConfig
    jcr:primaryType="cq:Widget"
    layout="hbox"
    xtype="multifieldpanel">
    <items jcr:primaryType="cq:WidgetCollection">
        <code
            jcr:primaryType="cq:Widget"
            fieldLabel="Code"
            key="code"
            xtype="textfield"/>
        <name
            jcr:primaryType="cq:Widget"
            fieldLabel="Name"
            key="name"
            xtype="textfield"/>
    </items>
</fieldConfig>

如果您对文档感兴趣，请参阅layout config option in the CQ.form.MultiField ExtJs documentation for AEM。您可能对其他布局选项感兴趣。

为了将来参考，当您对经典 UI 小部件有疑问时，请尝试使用 extjs 关键字搜索该问题，您会发现很多文章可能会有所帮助。例如，对于这个解决方案，我从这个SO question 得到了提示，我通过搜索“extjs in same row”发现了这个问题，然后查找了 extjs AEM 文档以查看是否有用于多字段小部件的布局选项。

Answer 2

在这种情况下，您需要创建自定义 xtype：how to create custom xtype

我建议只更改字段的宽度。您可以使用width 属性

<code
    jcr:primaryType="cq:Widget"
    fieldLabel="Code"
    key="code"
    width="100%"
    xtype="textfield"/>
<name
    cr:primaryType="cq:Widget"
    fieldLabel="Name"
    key="name"
    width="100%"
    xtype="textfield"/>

你会得到类似的东西：

Answer 3

在您的自定义客户端库中更改 CSS