태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.
김대중 전 대통령 서거 추모글 남기기

예제로 배우는 Flex2009.04.20 02:53

4. 데이터그리드에서 멀티로우 구현

예제3에서는 데이터그리드컬럼의 헤더렌더러를 이용하여 멀티컬럼을 구현했는데 이번에는 ItemRenderer를 이용하여 멀티로우를 구현해보도록 하자.

우선 그림4를 보면 각 로우는 년도를 빼고는 모두 2개의 데이터로써 구성이 된다. 그래서 initDG배열에서 [리스트2]와 같이 2개의 데이터를 표현하는 클래스를 사용하여 분기별 계획과 실적 데이터를 표현한다.

그러면 첫 번째 컬럼을 제외한 나머지 컬럼에서 아이템렌더러를 사용하여 각기 데이터를 HRule으로 분리해서 Label컴포넌트에 찍어준다.

 

[예제4] RDExam3_4.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*"

    width="450" height="370" verticalScrollPolicy="off" horizontalScrollPolicy="off"

    backgroundColor="#FFFFFF">

    <mx:Style>

        global {font-size:11}

    </mx:Style>

    <mx:Script>

        <![CDATA[

            [Bindable]

            public var initDG:Array = [

                {year:2006, division:new MultiRowVO('계획','실적'), q1:new MultiRowVO('90','80'), q2:new MultiRowVO('80','70'), q3:new MultiRowVO('100','60'), q4:new MultiRowVO('80','100')},

                {year:2005, division:new MultiRowVO('계획','실적'), q1:new MultiRowVO('80','100'), q2:new MultiRowVO('70','60'), q3:new MultiRowVO('80','60'), q4:new MultiRowVO('88','90')},

                {year:2004, division:new MultiRowVO('계획','실적'), q1:new MultiRowVO('70','75'), q2:new MultiRowVO('55','50'), q3:new MultiRowVO('60','70'), q4:new MultiRowVO('65','60')}

            ];  

        ]]>

    </mx:Script>

    <mx:DataGrid id="myGrid" dataProvider="{initDG}" headerHeight="50" variableRowHeight="false"

        width="450" height="300" horizontalGridLines="true" horizontalGridLineColor="#CCCCCC">

        <mx:columns>

            <mx:DataGridColumn headerText="년도" dataField="year" />

            <mx:DataGridColumn headerText="구분" dataField="division">

                <mx:itemRenderer>

                    <mx:Component>

                        <mx:VBox width="100%" height="100%" verticalGap="0">

                            <mx:Label text="{data.division.p1}" width="100%" height="20" textAlign="center"/>

                            <mx:HRule width="100%"/>                   

                            <mx:Label text="{data.division.p2}" width="100%" height="20" textAlign="center"/>

                        </mx:VBox>

                    </mx:Component>

                </mx:itemRenderer>

            </mx:DataGridColumn>

            <mx:DataGridColumn headerText="1분기" dataField="q1">

                <mx:itemRenderer>

                    <mx:Component>

                        <mx:VBox width="100%" height="100%" verticalGap="0">

                            <mx:Label text="{data.q1.p1}" width="100%" height="20" textAlign="center"/>

                            <mx:HRule width="100%"/>                   

                            <mx:Label text="{data.q1.p2}" width="100%" height="20" textAlign="center"/>

                        </mx:VBox>

                    </mx:Component>

                </mx:itemRenderer>             

            </mx:DataGridColumn>

            <mx:DataGridColumn headerText="2분기" dataField="q2">

                <mx:itemRenderer>

                    <mx:Component>

                        <mx:VBox width="100%" height="100%" verticalGap="0">

                            <mx:Label text="{data.q2.p1}" width="100%" height="20" textAlign="center"/>

                            <mx:HRule width="100%"/>                   

                            <mx:Label text="{data.q2.p2}" width="100%" height="20" textAlign="center"/>

                        </mx:VBox>

                    </mx:Component>

                </mx:itemRenderer>             

            </mx:DataGridColumn>

            <mx:DataGridColumn headerText="3분기" dataField="q3">

                <mx:itemRenderer>

                    <mx:Component>

                        <mx:VBox width="100%" height="100%" verticalGap="0">

                            <mx:Label text="{data.q3.p1}" width="100%" height="20" textAlign="center"/>

                            <mx:HRule width="100%"/>                   

                            <mx:Label text="{data.q3.p2}" width="100%" height="20" textAlign="center"/>

                        </mx:VBox>

                    </mx:Component>

                </mx:itemRenderer>             

            </mx:DataGridColumn>

            <mx:DataGridColumn headerText="4분기" dataField="q4">

                <mx:itemRenderer>

                    <mx:Component>

                        <mx:VBox width="100%" height="100%" verticalGap="0">

                            <mx:Label text="{data.q4.p1}" width="100%" height="20" textAlign="center"/>

                            <mx:HRule width="100%"/>                   

                            <mx:Label text="{data.q4.p2}" width="100%" height="20" textAlign="center"/>

                        </mx:VBox>

                    </mx:Component>

                </mx:itemRenderer>             

            </mx:DataGridColumn>

        </mx:columns>       

    </mx:DataGrid>    

</mx:Application>

 

 

[리스트2] MultiRowVO.as

package {

       public class MultiRowVO {

             [Bindable] public var p1:String;

             [Bindable] public var p2:String;

             public function MultiRowVO(p1:String, p2:String) {

                    this.p1 = p1;

                    this.p2 = p2;

             }

       }

}

 

 

[그림4] 아이템렌더러를 이용한 멀티컬럼 데이터그리드 구현


Posted by okgosu