flex DataGroup
19943 ワード
例1:
注意:
例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="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>
注意:
<?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>