timeIR.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx" 
				autoDrawBackground="true">
	<s:layout>
		<s:HorizontalLayout verticalAlign="middle" padding="10"/>
	</s:layout>
	
	<fx:Script>
		<![CDATA[
			import mx.events.ItemClickEvent;
			
			import spark.components.List;
			
			
			override public function set data(value:Object):void{
				super.data = value;
				if (value) {
					
				}
			}
			
			private function deleteItem():void
			{
				del.scaleX = del.scaleY = 0.9; 
				setTimeout(function ():void {del.scaleX = del.scaleY = 1;}, 100);
				
				var parentList:List = owner as List;
				var e:ItemClickEvent = new ItemClickEvent(ItemClickEvent.ITEM_CLICK, true);
				e.item = data;
				e.index = parentList.dataProvider.getItemIndex(data);
				e.label = "delete";
				dispatchEvent(e);
			}
			
			protected function hoursChange(event:Event):void
			{
				data.hour = hours.value;
				dataChanges();
			}
			
			protected function minitsChange(event:Event):void
			{
				data.min = minits.value;
				dataChanges();
			}
			public static function leadingZero(value:Number):String
			{
				if(value < 10){
					return "0" + value;
				}
				return value.toString();    
			}
			protected function dataChanges():void
			{
				var parentList:List = owner as List;
				var e:ItemClickEvent = new ItemClickEvent(ItemClickEvent.ITEM_CLICK, true);
				e.label = "change";
				dispatchEvent(e);
			}
		]]>
	</fx:Script>
	<s:Label text="{data.hour + ' : ' + data.min}" fontWeight="bold"/>
	<s:NumericStepper id="hours" value="{data.hour}" minimum="0" maximum="23" change="hoursChange(event)" valueFormatFunction="{leadingZero}"/>
	<s:NumericStepper id="minits" value="{data.min}" minimum="0" maximum="59" stepSize="5" change="minitsChange(event)" valueFormatFunction="{leadingZero}"/>
	<s:Image id="del" source="images/erase.png"  click="deleteItem()"/>
</s:ItemRenderer>