flex DataGroup

示例1：

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

<s:DataGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 

             xmlns:s="library://ns.adobe.com/flex/spark" 

             xmlns:mx="library://ns.adobe.com/flex/mx" 

             width="200" height="100%"  dataProvider="{dataArr}" creationComplete="datagroup1_creationCompleteHandler(event)">

        <s:layout>

            <s:VerticalLayout gap="1" useVirtualLayout="true" paddingLeft="2" paddingRight="2" />

        </s:layout>

        <fx:Script>

            <![CDATA[

                import mx.collections.ArrayCollection;

                import mx.events.FlexEvent;

                [Bindable]

                public var dataArr:ArrayCollection

                

                protected function datagroup1_creationCompleteHandler(event:FlexEvent):void

                {

                    // TODO Auto-generated method stub

                    

                }

                

            ]]>

        </fx:Script>

        <s:itemRenderer>

            <fx:Component>

                <s:ItemRenderer width="195" height="30" click="itemrenderer1_clickHandler(event)" dataChange="itemrenderer1_dataChangeHandler(event)" >

                    

                    <fx:Script>

                        <![CDATA[

                            import com.AppEvent;

                            

                            import mx.events.FlexEvent;

                            [Bindable]

                            private var tempdata:Object;

                            

                            protected function itemrenderer1_clickHandler(event:MouseEvent):void

                            {

                                AppEvent.dispatch("menu_selected",data);

                                for each(var o:Object in outerDocument.dataArr)

                                {

                                    o.selected=false;

                                } 

                                data.selected=true;

                                outerDocument.dataArr.refresh();

                            }

                            

                            protected function itemrenderer1_dataChangeHandler(event:FlexEvent):void

                            {

                                //tempdata=data;

                            }

                            

                        ]]>

                    </fx:Script>

                    

                    <s:states>

                        <s:State name="normal" />

                        <s:State name="hovered" />

                        <s:State name="selected" />

                    </s:states>

                    

                    <s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5"  visible="{!data.selected}">

                        <s:fill>

                            <s:SolidColor color="#92CDEA" color.hovered="#65A3FF" alpha="0.9" alpha.hovered="1"  />

                        </s:fill>

                    </s:Rect>

                    <s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5"  visible="{data.selected}">

                        <s:fill>

                            <s:SolidColor color="#65A3FF" />

                        </s:fill>

                    </s:Rect>

                    <s:Label id="txtStart" text="{data.label}"  buttonMode="true" useHandCursor="true"

                             fontSize="16" color="#FFFFFF"  fontFamily="微软雅黑" left="20" verticalCenter="2" />

                </s:ItemRenderer>

            </fx:Component>

        </s:itemRenderer>

</s:DataGroup>

注意：

<s:ItemRenderer width="195" height="30" autoDrawBackground="false"  这里如果给了宽度和高度那么，每一项就固定死了，如果不给就是活的。

示例2：

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

<s:DataGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 

             xmlns:s="library://ns.adobe.com/flex/spark" 

             xmlns:mx="library://ns.adobe.com/flex/mx" 

             width="100%" height="100%"  dataProvider="{dataArr}" creationComplete="datagroup1_creationCompleteHandler(event)">

    <s:layout>

        <s:TileLayout  verticalGap="20" horizontalGap="20" horizontalAlign="left" paddingLeft="20" paddingTop="6"/>

    </s:layout>

        <fx:Script>

            <![CDATA[

                import mx.collections.ArrayCollection;

                import mx.events.FlexEvent;

                [Bindable]

                public var dataArr:ArrayCollection

                

                protected function datagroup1_creationCompleteHandler(event:FlexEvent):void

                {

                    // TODO Auto-generated method stub

                    

                }

                

            ]]>

        </fx:Script>

        <s:itemRenderer>

            <fx:Component>

                <s:ItemRenderer  autoDrawBackground="false" click="itemrenderer1_clickHandler(event)" dataChange="itemrenderer1_dataChangeHandler(event)" >

                    

                    <fx:Script>

                        <![CDATA[

                            import com.esri.viewer.AppEvent;

                            

                            import mx.events.FlexEvent;

                            [Bindable]

                            private var tempdata:Object;

                            

                            protected function itemrenderer1_clickHandler(event:MouseEvent):void

                            {

                                AppEvent.dispatch("xzq2_selected",data);

                                for each(var o:Object in outerDocument.dataArr)

                                {

                                    o.selected=false;

                                } 

                                data.selected=true;

                                outerDocument.dataArr.refresh();

                            }

                            

                            protected function itemrenderer1_dataChangeHandler(event:FlexEvent):void

                            {

                                //tempdata=data;

                            }

                            

                        ]]>

                    </fx:Script>

                    

                    <s:states>

                        <s:State name="normal" />

                        <s:State name="hovered" />

                        <s:State name="selected" />

                    </s:states>

                    

                    <s:Rect id="hoveredBorder" left="-4" right="-4" top="-6" bottom="-4" radiusX="2" radiusY="2" includeIn="hovered">

                        <s:stroke>

                            <s:LinearGradientStroke rotation="90">

                                <s:GradientEntry  color="#53C500" ratio="0" />

                                <s:GradientEntry  color="#52b0e8" ratio="1" />

                            </s:LinearGradientStroke>

                        </s:stroke>

                        <s:fill>

                            <s:SolidColor color="#65A3CE" alpha="0.1"/>

                        </s:fill>

                    </s:Rect>

                    

                    <s:Rect id="SelectedBorder" left="-4" right="-4" top="-6" bottom="-4" radiusX="2" radiusY="2" visible="{data.selected}">

                        <s:stroke>

                            <s:LinearGradientStroke rotation="90">

                                <s:GradientEntry  color="#53C500" ratio="0" />

                                <s:GradientEntry  color="#52b0e8" ratio="1" />

                            </s:LinearGradientStroke>

                        </s:stroke>

                        <s:fill>

                            <s:SolidColor color="#65A3CE" alpha="0.1"/>

                        </s:fill>

                    </s:Rect>

                    <s:Label text="{data.name}" verticalCenter="0" horizontalCenter="0"

                             maxDisplayedLines="1" toolTip="{data.label}"  fontFamily="微软雅黑"

                             fontSize="14" buttonMode="true" color="0x348D9B"/>

                </s:ItemRenderer>

            </fx:Component>

        </s:itemRenderer>

</s:DataGroup>

注意：

如果要滚动条那么要这样：

<s:Scroller width="290" height="150" left="10">

                    <HeaderController:xzqTiledDataGroup left="10" dataArr="{dataArr2}" width="290" height="150"/>

                </s:Scroller>