stackoverflow_20664412.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
					   xmlns:s="library://ns.adobe.com/flex/spark"
					   xmlns:mx="library://ns.adobe.com/flex/mx"
					   height="100"
					   width="100">
	<fx:Declarations>
		<s:ArrayCollection id="damages">
			<fx:Array>
				<fx:Object damage="damage1"
						   damageType="type1"/>
				<fx:Object damage="damage2"
						   damageType="type2"/>
				<fx:Object damage="damage3"
						   damageType="type1"/>
			</fx:Array>
		</s:ArrayCollection>
	</fx:Declarations>
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		s|TextInput {
			color: #000000;
			focusColor: null;
			contentBackgroundColor: #FFFFFF;
			borderColor: #696969;
		}
	</fx:Style>

	<s:Scroller id="listScroller"
				width="100%"
				height="100%">
		<s:VGroup width="100%"
				  height="100%">
			<s:HGroup width="100%"
					  horizontalAlign="center"
					  verticalAlign="top">
				<s:Label width="100"
						 text="SchadenTyp"
						 textAlign="left"/>
				<s:Label width="100%"
						 text="Schaden"
						 textAlign="left"/>
				<s:Label width="80"
						 text="Reparatur"
						 textAlign="left"/>
			</s:HGroup>

			<s:DataGroup width="100%"
						 clipAndEnableScrolling="true"
						 dataProvider="{damages}">
				<s:layout>
					<s:VerticalLayout gap="1"
									  useVirtualLayout="true"/>
				</s:layout>
				<s:itemRenderer>
					<fx:Component>
						<s:ItemRenderer width="100%"
										height="40">
							<s:states>
								<s:State name="normal"/>
								<s:State name="hovered"/>
								<s:State name="selected"/>
							</s:states>
							<fx:Script>
								<![CDATA[
									override public function set data(value:Object):void {
										super.data = value;

										if(data == null) // a renderer's data is set to null when it goes out of view
											return;

										damageName.text = data.damage;
										damageType.text = data.damageType;
									}
								]]>
							</fx:Script>

							<s:transitions>
								<s:Transition fromState="normal"
											  toState="hovered">
									<s:Animate duration="200"
											   target="{flightPlan}">
										<s:SimpleMotionPath property="width"/>
									</s:Animate>
								</s:Transition>
								<s:Transition fromState="hovered"
											  toState="normal">
									<s:Animate duration="200"
											   target="{flightPlan}">
										<s:SimpleMotionPath property="width"/>
									</s:Animate>
								</s:Transition>
							</s:transitions>

							<s:Rect left="0"
									right="0"
									top="0"
									bottom="0"
									radiusX="5"
									radiusY="5">
								<s:fill>
									<s:SolidColor color="#dddddd"/>
								</s:fill>
							</s:Rect>

							<s:HGroup verticalAlign="middle">
								<s:HGroup id="flightPlan"
										  height="60"
										  width.hovered="330">
									<s:Rect left="0"
											right="0"
											top="0"
											bottom="0"
											radiusX="5"
											radiusY="5">
										<s:fill>
											<s:SolidColor color="#65A3CE"
														  color.hovered="#65A3FF"/>
										</s:fill>
									</s:Rect>
									<s:Label id="damageType"
											 width="100"
											 color="#000000"
											 fontWeight="bold"
											 verticalCenter="2"/>
									<s:TextInput id="damageName"
												 width="100%"
												 color="#000000"
												 fontWeight="bold"
												 verticalCenter="2"/>
									<!--<nxToggleSwitch:ToggleSwitch id="switch2" width="80"/>-->
								</s:HGroup>
							</s:HGroup>
						</s:ItemRenderer>
					</fx:Component>
				</s:itemRenderer>
			</s:DataGroup>
		</s:VGroup>
	</s:Scroller>
</s:WindowedApplication>