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，您可以在其下配置选择字段。所以你可能需要相应地调整你的风格。

单选按钮布局使水平

1 个答案: