AEM 터치 UI 대화 상자의 가로 레이아웃을 구성하는 방법

Question

이전 ExtJs 크기 위젯과 같이 2 개의 텍스트 상자를 나란히 배치해야하는 터치 UI 요구 사항이 있습니다. layout이 항목을 설정하여 해당 오브젝트를 서로 옆에 배치 할 수 있습니다. 이전 구현에서는 hbox 레이아웃을 사용하여 사용자 정의 위젯을 작성했습니다. 나는 이것이 지금 지원되어야한다고 생각하지만 문서에서 그것을 찾을 수 없습니다. 모든 참조가 도움이 될 것입니다. 감사합니다

Answer 1

당신은

fixedColumn layout 당신이 대화 모드로 부동의 열을 볼 수 없습니다점에 유의하시기 바랍니다 사용해야합니다,이 레이아웃은 스크린 샷을 참조 전체 화면 대화위한 것입니다. 그것은 어떤의 경우와 마찬가지로

<?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> 

대화

대화 전체 화면 모드

모드에서 를 부동 : 여기

내가 함께 넣어 예입니다 대화 상자 관련 질문, 당신은 자신의 CSS를 작성할 수 있습니다. 그러나 CSS의 기능을 사용하지 못하게하는 대화 마크 업/클래스가 미래에 바뀔 위험이 있습니다.