[Flex 3.3] List 컴포넌트에 데이터 입력는 방법

List 컴포넌트에 데이터를 입력하기 위해선 dataProvider 를 이용합니다.

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

<mx:List width="150" height="100" dataProvider="{listData}" />


위 예제는 List 컴포넌트에 넣을 데이터를 모두 준비하여 한번에 입력하는 방식입니다.

그런데 이렇게 미리 데이터를 준비하여 한번에 입력하는 경우 말고 그때 그때 필요에 의해 List 컴포넌트에

데이터를 입력할려면...

<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable] private var listData:ArrayCollection = new ArrayCollection();

        public function addData( data:Object ):void {
            listData.addItem(data);
        }
    ]]>
</mx:Script>

<mx:List width="150" height="100" dataProvider="{listData}" />


addData(...) 를 필요한 데이터 객체를 만들어서 호출을 하면 List 목록을 동적으로 만들 수 있습니다.

List 컴포넌트의 dataProvider 에 listData 를 데이터 바인딩 시켜놨기 때문에 listData 변수의 값을 변경시킴으로

List 컴포넌트의 내용도 같이 변경이 되는 것입니다.


그럼 반대로 List 목록중에 필요없는 row 를 삭제 할려면...


<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable] private var listData:ArrayCollection = new ArrayCollection();

        public function addData( data:Object ):void {
            listData.addItem(data);
        }

        public function removeData( index:int ):void {
            listData.removeItemAt(index);
        }
    ]]>
</mx:Script>

<mx:List width="150" height="100" dataProvider="{listData}" />


removeData(...) 를 필요없는 목록중의 row 인덱스 (0 ~ ...) 를 이용하여 호출하면 됩니다.

그런데 인덱스가 아닌 특정 제목(label)으로 삭제를 할려면 List 목록의 모든 row 의 label 값을 비교해야합니다.