如何为 aem touch ui 对话框配置水平布局
How to configure horizontal layout for aem touch ui dialog
我有一个 touch ui requirement,我需要像旧的 ExtJs 大小小部件一样并排放置 2 个文本框。有没有 layout
我可以设置为 item 来将这些对象并排放置。对于较旧的实现,我编写了一个带有 hbox 布局的自定义小部件。我认为现在应该支持它,但无法在文档中找到它。任何参考资料都会有所帮助。谢谢
你应该使用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.
我有一个 touch ui requirement,我需要像旧的 ExtJs 大小小部件一样并排放置 2 个文本框。有没有 layout
我可以设置为 item 来将这些对象并排放置。对于较旧的实现,我编写了一个带有 hbox 布局的自定义小部件。我认为现在应该支持它,但无法在文档中找到它。任何参考资料都会有所帮助。谢谢
你应该使用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.