如何为 aem touch ui 对话框配置水平布局

Question

我有一个 touch ui requirement，我需要像旧的 ExtJs 大小小部件一样并排放置 2 个文本框。有没有 layout 我可以设置为 item 来将这些对象并排放置。对于较旧的实现，我编写了一个带有 hbox 布局的自定义小部件。我认为现在应该支持它，但无法在文档中找到它。任何参考资料都会有所帮助。谢谢

Answer 1

你应该使用fixedColumn layout

Please note that you will not see the columns in floating dialog mode, this layout is intended for fullscreen dialog, see the screenshots.

这是我整理的一个例子：

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Sample"
    sling:resourceType="cq/gui/components/authoring/dialog"
    mode="edit">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <columns
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/container">
                <layout
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                <items jcr:primaryType="nt:unstructured">
                    <col1
                        jcr:primaryType="nt:unstructured"
                        jcr:title="General"
                        sling:resourceType="granite/ui/components/foundation/section">
                        <items jcr:primaryType="nt:unstructured">
                            <filed1col1
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/textfield"
                                fieldDescription="sample filed1col1"
                                fieldLabel="filed 1 col 1"
                                name="./filed1col1"/>
                        </items>
                    </col1>
                    <col2
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Phone Numbers"
                        sling:resourceType="granite/ui/components/foundation/section">
                        <items jcr:primaryType="nt:unstructured">
                            <filed1col2
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/foundation/form/textfield"
                                    fieldDescription="sample filed1col2"
                                    fieldLabel="filed 1 col 2"
                                    name="./filed1col2"/>
                        </items>
                    </col2>
                </items>
            </columns>
        </items>
    </content>
</jcr:root>

浮动模式下的对话框

全屏模式下的对话框

As it is the case with any dialog related questions, you can write your own CSS to achive this functionality, however, you run the risk of dialog markup/classes changing in future which will render your CSS useless.

如何为 aem touch ui 对话框配置水平布局

How to configure horizontal layout for aem touch ui dialog

dialog

aem