首页 > 代码库 > flex DataGroup

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=http://www.mamicode.com/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=http://www.mamicode.com/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>

 

flex DataGroup