使水平的单选按钮布局

Question

我正在设计一个对话框，我希望其中的单选按钮水平显示而不是垂直显示，以便显示在一行中。任何想法如何实现这一目标。

下面是我的dialog.xml.

<items
        jcr:primaryType="cq:Widget"
        xtype="tabpanel">
        <items jcr:primaryType="cq:WidgetCollection">
            <tab1
                jcr:primaryType="cq:Panel"
                title="Slider">
                <items jcr:primaryType="cq:WidgetCollection">
                    <typeconfigs
                        jcr:primaryType="cq:Widget"
                        fieldLabel="Select Videos"
                        name="./options"
                        xtype="customconfigmultifield">
                        <fieldConfigs jcr:primaryType="cq:WidgetCollection">
                            <gridlayout
                                jcr:primaryType="cq:Widget"
                                itemId="dispotions"
                                name="selcttab"
                                type="radio"
                                xtype="selection">
                                <options jcr:primaryType="cq:WidgetCollection">
                                    <grid1
                                        jcr:primaryType="nt:unstructured"
                                        text="grid1"
                                        value="grid1"/>
                                    <grid2
                                        jcr:primaryType="nt:unstructured"
                                        text="grid2"
                                        value="grid2"/>
                                    <grid3
                                        jcr:primaryType="nt:unstructured"
                                        text="grid3"
                                        value="grid3"/>
                                    <grid4
                                        jcr:primaryType="nt:unstructured"
                                        text="grid4"
                                        value="grid4"/>
                                </options>
                            </gridlayout>
                        </fieldConfigs>
                        <limit
                            jcr:primaryType="nt:unstructured"
                            maxVal="{Long}6"/>
                    </typeconfigs>
                </items>
            </tab1>
        </items>

谢谢

Answer 1

您可以尝试使用 ExtJS Layouts 进行同样的操作。有多种配置方式，其中一种可能是使用 hbox 布局，如下所示。

使用 Selection Widget 可用的 layout 配置并将其值设置为 hbox。然后使用 optionsConfig 设置适用于每个单选框的宽度。由于 optionsConfig 接受一个对象，创建它是您选择的子节点，然后设置所需的样式。

示例对话框结构如下所示。

<gridlayout
    jcr:primaryType="cq:Widget"
    itemId="dispotions"
    name="selcttab"
    type="radio"
    xtype="selection"
    layout="hbox">
    <options jcr:primaryType="cq:WidgetCollection">
        <grid1
            jcr:primaryType="nt:unstructured"
            text="grid1"
            value="grid1"/>
        <grid2
            jcr:primaryType="nt:unstructured"
            text="grid2"
            value="grid2"/>
        <grid3
            jcr:primaryType="nt:unstructured"
            text="grid3"
            value="grid3"/>
        <grid4
            jcr:primaryType="nt:unstructured"
            text="grid4"
            value="grid4"/>
    </options>
    <optionsConfig 
        jcr:primaryType="nt:unstructured"
        width="60" />
</gridlayout>

此解决方案通常有效，但是，我注意到定义了一个自定义小部件 customconfigmultifield，您可以在其下配置选择字段。因此，您可能需要相应地调整样式。

使水平的单选按钮布局

Radio buttons layout to make horizontal

aem