[Flex 3.3] List 에 CheckBox 추가하는 방법 Flex 3

기본 List 컴포넌트는 다음 처럼 보입니다.



여기에 CheckBox 를 넣으면 다음과 같습니다.

 

이렇게 CheckBox 를 넣을려면 아래 코드처럼 itemRenderer 를 기본 ListItemRenderer 가 아닌 CheckBox 가 들어간 클래스로 변경하면 됩니다.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
                layout="absolute" 
                backgroundGradientAlphas="[1.0, 1.0]" 
                backgroundGradientColors="[#FFFFFF, #FFFFFF]">
 
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
   
            [Bindable] private var listData:ArrayCollection = new ArrayCollection([
                {label:"iMac 24", checked:true},
                {label:"MacBook Pro 17", checked:true},
                {label:"iPhone 3GS", checked:false}]);
        ]]>
    </mx:Script>

    <!-- 기본 List -->
    <mx:List x="50" y="50" width="150" height="100" dataProvider="{listData}" rowHeight="25"
      alternatingItemColors="[#EEEEEE, #FFFFFF]" />
 
    <!-- CheckBox 추가 -->
    <mx:List x="250" y="50" width="150" height="100" dataProvider="{listData}" rowHeight="25"
      alternatingItemColors="[#EEEEEE, #FFFFFF]" itemRenderer="CheckBoxRenderer" />
 
</mx:Application>


위 코드에서 listData 의 내용을 보면 label 과 checked 라는 변수명을 사용하였습니다.

이러한 변수명은 프로그래머 마음대로 작성합니다.

그러나 label 이라는 변수는 CheckBox 에서 보일 내용이며 변수명은 다른 것으로 바꿀 수 없습니다.

왜 그런지 살펴보면 CheckBox 의 parent class 인 Button Class 의 내용을 보면 아래에서 처럼 CheckBox 에서 화면에 나타날

내용이 저장되는 label 변수에 _listData.label 의 값이 할당됨을 볼 수 있습니다.

여기서 _listData.label 은 labelField 에 할당된 필드값으로 설정되는대 초기값으로 "label" 이 할당되어있습니다.

그래서 위 코드의 listData 에서 label 을 사용하였습니다.

Button.as

public function set data(value:Object):void
{
    ...
    
    newLabel = _listData.label;
    
    ...

    if (newLabel !== undefined && !labelSet)
    {
        label = newLabel;
        labelSet = false;
    }

    ...
}


다른 변수명을 사용하고 싶으면 labelField="다른변수명" 을 사용하면됩니다.


그럼 CheckBoxRenderer 를 살펴보면...

selectedField 라는 속성이 있습니다. 이 속성은 CheckBox 가 체크가 되었는지를 알려주며, 이 값 checked 는 위 listData 에서

두번째 변수명 checked 를 의미합니다. 즉 checked 의 값에 따라 체크가 결정되도록 하는 것입니다.

그리고 체크박스를 체크하면 clickCheckBox 메소드가 호출되며 data.checked 를 확인하여 값을 반대로 하여 체크박스가

체크가 되었는지 않되었는지 값을 저장합니다.

여기서 data 는 위 listData 중에 해당 row 의 값이 저장되는 곳입니다.

이렇게 data 의 값을 변경하는 이유는 어떤 row 가 체크가 되었는지 데이터 바인딩 되어있는  listData 를 통해서

쉽게 확인하기 위해서입니다.

CheckBoxRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:CheckBox xmlns:mx="http://www.adobe.com/2006/mxml"
             selectedField="checked" 
             click="clickCheckBox()">
    
    <mx:Script>
        <![CDATA[
            private function clickCheckBox():void {
                if( data.checked ) {
                    data.checked = false;
                } else {
                    data.checked = true;
                }
            }
        ]]>
    </mx:Script>

</mx:CheckBox>


덧글

  • ☆犬夜叉☆ 2009/06/20 08:44 # 답글

    아이템 렌더러는 쓸수록 느려지더군요. 될 수 있으면 쓰고 싶지 않더군요. 잘 보고 갑니다~
댓글 입력 영역