使水平的單選按鈕佈局

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定義下，你要配置一個選擇欄。所以你可能需要相應地調整你的風格。