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>