如何为aem touch ui对话框

Question

我有一个触摸ui要求，我需要像旧的ExtJs尺寸小部件一样并排放置2个文本框。是否有layout我可以将项目设置为将这些对象放在一起。对于较旧的实现，我编写了一个带有hbox布局的自定义小部件。我认为这应该得到支持，但无法在文档中找到它。任何参考都会有帮助。感谢

Answer 1

您应该使用fixedColumn layout

  

请注意，您将不查看浮动对话框模式中的列，此布局适用于全屏对话框，请参阅屏幕截图。

这是我放在一起的一个例子：

<?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>

浮动模式下的对话框

全屏模式下的

对话框

  

正如任何与对话框相关的问题一样，您可以编写自己的CSS来实现此功能，但是，您将面临更改对话框标记/类的风险，这将使您的CSS无用。