플렉스에서 rowSpan에 대한 이상한 동작

Question

플렉스에서 그리드 구성 요소로 작업 할 때 이상하게 느껴진다. 볼 수 있듯이 각 GridRow에 테두리가있는 다음과 같은 양식이 있습니다.

내 문제는합니다 (GridRow 테두리가 바로 그것을 던져 가서, 4 행에 걸쳐있는 텍스트 영역을 관찰!) 경계가 여러 행에 걸쳐 GridItems 통해 여전히 볼 수 있다는 것입니다이 문제를 해결하는 방법에

어떤 아이디어?

Answer 1

그리드가 그려지는 경우 각 행이 위에서 아래로 그리고 각 행 내에서 왼쪽에서 오른쪽으로 그려지는 것이 문제라고 생각합니다. 따라서 가로 행의 < mx : TextArea > 항목이 먼저 그려지며 그 다음과 그 다음에 그려지는 2 행의 영역으로 확장됩니다.

내가 볼 수있는 가장 빠른 방법은 < mx : GridItem >에 행 테두리를 그려서 행의 항목 배치에 따라 왼쪽 및 오른쪽 가장자리를 건너 뛰는 것입니다. 다음과 같은 내용 :

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
    <mx:Style> 
     Grid { 
      background-color: white; 
      horizontal-gap: 0; 
     } 
     GridItem { 
      padding-top: 5; 
      padding-left: 5; 
      padding-right: 5; 
      padding-bottom: 5; 
      background-color: #efefef; 

      border-style: solid; 
      border-thickness: 1; 
      border-color: black; 
     } 
     .left { 
      border-sides: top, bottom, left; 
     } 
     .right { 
      border-sides: top, bottom, right; 
     } 
     .center { 
      border-sides: top, bottom; 
     } 
    </mx:Style> 
    <mx:Grid> 
     <mx:GridRow> 
      <mx:GridItem styleName="left"> 
       <mx:Label text="Label"/> 
      </mx:GridItem> 
      <mx:GridItem styleName="center"> 
       <mx:ComboBox/> 
      </mx:GridItem> 
      <mx:GridItem styleName="center"> 
       <mx:Label text="Label"/> 
      </mx:GridItem> 
      <mx:GridItem styleName="right"> 
       <mx:ComboBox/> 
      </mx:GridItem> 
     </mx:GridRow> 
     <mx:GridRow> 
      <mx:GridItem styleName="left"> 
       <mx:Label text="Label"/> 
      </mx:GridItem> 
      <mx:GridItem styleName="center"> 
       <mx:TextInput/> 
      </mx:GridItem> 
      <mx:GridItem colSpan="2" rowSpan="3"> 
       <mx:VBox width="100%" height="100%"> 
        <mx:Label text="Label"/> 
        <mx:TextArea width="100%" height="100%"/> 
       </mx:VBox> 
      </mx:GridItem> 
     </mx:GridRow> 
     <mx:GridRow> 
      <mx:GridItem styleName="left"> 
       <mx:Label text="Label"/> 
      </mx:GridItem> 
      <mx:GridItem styleName="center"> 
       <mx:TextInput/> 
      </mx:GridItem> 
     </mx:GridRow> 
     <mx:GridRow> 
      <mx:GridItem styleName="left"> 
       <mx:Label text="Label"/> 
      </mx:GridItem> 
      <mx:GridItem styleName="center"> 
       <mx:TextInput/> 
      </mx:GridItem> 
     </mx:GridRow> 
    </mx:Grid> 
</mx:Application>