使水平的单选按钮布局

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布局，如下所示。

使用layout配置可用于Selection Widget并将其值设置为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> 

此方法适用于一般的，但是，我注意到，有一个自定义的widget customconfigmultifield定义下，你要配置一个选择栏。所以你可能需要相应地调整你的风格。