[Flex] DataGrid Column의 가로폭을 비율로 설정

플랙스(FLEX)의 DataGridColumn 가로 폭(width)을 비율로 정하는 간단한 팁을 소개하고자 한다.

아래와 같은 방법을 사용하면 %로 폭을 설정하는 것과 같은 효과를 볼 수가 있다.

[예제]DataGrid에 컬럼을 5개를 다음과 같은 헤더와 비율로 만든다고 하자.

번호: 10%
제목: 50%
이름: 15%
날짜: 15%
열람 수: 10%

 

이제 실제 가로 폭보다 아주 큰 숫자를 정한 후, 각 컬럼의 비율을 곱한 값을 픽셀 폭으로 설정하면 원하는 비율로 DataGridColumn을 보여지도록 할 수 있다.

예를 들어, 10000을 각 비율로 곱한 컬럼의 픽셀 폭은 다음과 같다.
  

번호: 10000 * 0.1 = 1000
제목: 10000 * 0.5 = 5000
이름: 10000 * 0.15 = 1500
날짜: 10000 * 0.15 = 1500
열람 수: 10000 * 0.1 = 1000

 

위와 같이 계산된 컬럼 폭을 사용한 DataGrid를 그려보면 아래와 같이 원하는 비율로 컬럼 폭이 유지됨을 확인할 수 있다.

<mx:DataGrid width="100%" rowCount="3">
  <mx:columns>
   <mx:DataGridColumn headerText="번호" width="1000"/>
   <mx:DataGridColumn headerText="제목" width="5000"/>
   <mx:DataGridColumn headerText="이름" width="1500"/>
   <mx:DataGridColumn headerText="날짜" width="1500"/>
   <mx:DataGridColumn headerText="열람 수" width="1000"/>
  </mx:columns>
</mx:DataGrid>

출처  : http://www.cyworld.com/duck_info/4379804