태터데스크 관리자

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

태터데스크 메시지

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

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

3. 데이터그리드컬럼 헤더렌더러를 추가한 설문통계 기능 구현

예제2d서 약간 아쉬운 것은 데이터그리드의 헤더부분이다. 여기에 라디오버튼의 체크번호가 몇 번인지를 표현한 것이 예제3번이다.


여기서는 다른 부분은 DataGridColumnheaderRender를 구현하여 각 라디오버튼의 체크번호를 같이 표시하였다. 헤더렌더러는 아이템렌더러와 동일하게 HBox RadioButton VRule으로 나누어서 5개씩 표시하였다.

 

[예제3] RDExam3_3.mxml

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

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

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

    backgroundColor="#FFFFFF">

    <mx:Style>

        global {font-size:12}

    </mx:Style>

    <mx:Script>

        <![CDATA[

            [Bindable]

            public var initDG:Array = [

                {No:1,  Name:'Test1',  CheckNum:1},

                {No:2,  Name:'Test2',  CheckNum:2},

                {No:3,  Name:'Test3',  CheckNum:3},

                {No:4,  Name:'Test4',  CheckNum:4},

                {No:5,  Name:'Test5',  CheckNum:5},

                {No:6,  Name:'Test6',  CheckNum:5},

                {No:7,  Name:'Test7',  CheckNum:4},

                {No:8,  Name:'Test8',  CheckNum:3},

                {No:9,  Name:'Test9',  CheckNum:2},

                {No:10, Name:'Test10', CheckNum:1}               

            ];   

            [Bindable] public var totalData:String = "Total : ";

            public function calTotal():void {

                var totNum:uint = 0;

                for(var i:uint=0; i<initDG.length; i++) {

                    totNum += initDG[i].CheckNum;

                }

                totalData = "Total : " + totNum;

            }

        ]]>

    </mx:Script>

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

        width="450" height="300" creationComplete="calTotal()">   

        <mx:columns>

                <mx:DataGridColumn dataField="No"/>

                <mx:DataGridColumn dataField="Name"/>

                <mx:DataGridColumn width="300"  dataField="CheckNum"

                    editable="true" sortable="false"

                    rendererIsEditor="true">

                    <mx:headerRenderer>

                        <mx:Component>

                            <mx:HBox width="100%" height="100%" horizontalGap="0" verticalGap="0" verticalScrollPolicy="off">

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

                                    <mx:Label text="Selected Number" width="100%" height="15" textAlign="center"/>

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

                                    <mx:HBox width="100%" height="15" paddingLeft="5" paddingRight="5">

                                        <mx:Label text="No.5" width="100%" textAlign="center" />

                                        <mx:VRule width="1" height="100%"/>

                                        <mx:Label text="No.4" width="100%" textAlign="center" />

                                        <mx:VRule width="1" height="100%"/>

                                        <mx:Label text="No.3" width="100%" textAlign="center" />

                                        <mx:VRule width="1" height="100%"/>

                                        <mx:Label text="No.2" width="100%" textAlign="center" />

                                        <mx:VRule width="1" height="100%"/>

                                        <mx:Label text="No.1" width="100%" textAlign="center" />

                                    </mx:HBox>     

                                </mx:VBox>

                                <mx:VRule width="1" height="100%"/>

                                <mx:VBox width="50" height="100%" horizontalAlign="center" verticalAlign="bottom">

                                    <mx:Spacer width="100%" height="100%"/>

                                    <mx:Label width="100%" height="100%" text="Points" textAlign="center"/>

                                    <mx:Spacer width="100%" height="100%"/>

                                </mx:VBox>

                            </mx:HBox>                             

                        </mx:Component>                    

                    </mx:headerRenderer>

                    <mx:itemRenderer>

                        <mx:Component>

                            <mx:HBox width="100%"  height="18" horizontalAlign="center"

                                horizontalGap="0"  verticalGap="0"

                                paddingLeft="0" paddingBottom="0" paddingRight="0" paddingTop="0"

                                borderStyle="none" horizontalScrollPolicy="off" verticalScrollPolicy="off"

                                >

                            <mx:Script>

                                <![CDATA[

                                    private function checkRadioHandler(event:Event):void {

                                        var outObj:Object = event.currentTarget.parent.outerDocument;

                                        var idx:uint = outObj.myGrid.selectedIndex

                                        outObj.initDG[idx].CheckNum = event.currentTarget.value;

                                        outObj.myGrid.selectedIndex = idx;

                                        this.lbl.text = event.currentTarget.value;

                                        outObj.calTotal();

                                    }

                                ]]>

                            </mx:Script>                           

                                <mx:RadioButtonGroup id="rg"/>

                                    <mx:RadioButton label="" labelPlacement="bottom" groupName="rg" width="100%" value="5" selected="{5==data.CheckNum}" click="checkRadioHandler(event)"/>

                                    <mx:VRule width="1" height="100%"/>                            

                                    <mx:RadioButton label="" labelPlacement="bottom" groupName="rg" width="100%" value="4" selected="{4==data.CheckNum}" click="checkRadioHandler(event)"/>

                                    <mx:VRule width="1" height="100%"/>

                                    <mx:RadioButton label="" labelPlacement="bottom" groupName="rg" width="100%" value="3" selected="{3==data.CheckNum}" click="checkRadioHandler(event)"/>

                                    <mx:VRule width="1" height="100%"/>

                                    <mx:RadioButton label="" labelPlacement="bottom" groupName="rg" width="100%" value="2" selected="{2==data.CheckNum}" click="checkRadioHandler(event)"/>

                                    <mx:VRule width="1" height="100%"/>                            

                                    <mx:RadioButton label="" labelPlacement="bottom" groupName="rg" width="100%" value="1" selected="{1==data.CheckNum}" click="checkRadioHandler(event)"/>

                                    <mx:VRule width="1" height="100%"/>                             

                                    <mx:Label id="lbl" width="100%" textAlign="center" text="{data.CheckNum}"/>

                            </mx:HBox>

                        </mx:Component>                        

                    </mx:itemRenderer>

                </mx:DataGridColumn>               

        </mx:columns>       

    </mx:DataGrid>    

    <mx:HBox width="650" horizontalAlign="center">

        <mx:Label text="{totalData}" id="totalLbl"/>       

    </mx:HBox> 

</mx:Application>

 

 

[그림3] 데이터컬럼 헤더렌더러를 추가한 설문통계 구현


Posted by okgosu

티스토리 툴바