[Flex팁] DataGridColumn의 가로폭을 비율로 설정하기

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

FLEX reference를 보면 알겠지만, DataGrid의 컬럼의 가로 폭은 픽셀 단위로만 설정을 하게되어 있어서, DataGrid의 길이가 변화될 때에 특정 비율을 유지하도록 하기에 어려운 점이 있다.

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

예를 들어, 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>

출처 : 어디선가 봤는데 기억이 나지 않음.