Как создать текстовые поля в одной строке диалога AEM (классический интерфейс)

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 в документации CQ.form.MultiField ExtJs для AEM . Возможно, вас заинтересуют другие варианты макета.

Для дальнейшего использования, если у вас есть вопросы о классических виджетах пользовательского интерфейса, попробуйте поискать эту проблему по ключевому слову extjs, вы найдете много статей, которые могут вам помочь. Например, для этого решения я получил подсказку из этого SO вопроса и обнаружил этот вопрос, выполнив поиск "extjs in same row", а затем посмотрел документацию extjs AEM, чтобы увидеть, есть ли опция макета для мультипольного виджета.

Answer 2

В этом случае вам необходимо создать пользовательский xtype: как создать пользовательский 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"/>

Вы получите что-то подобное: