//----------------------------------
// States
//----------------------------------

/**
 *  Opened Normal State
 *  
 *  @langversion 3.0
 *  @playerversion Flash 10
 *  @playerversion AIR 1.5
 *  @productversion Flex 4
 */
[SkinState("openedNormal")]

/**
 *  Opened Disabled State
 *  
 *  @langversion 3.0
 *  @playerversion Flash 10
 *  @playerversion AIR 1.5
 *  @productversion Flex 4
 */
[SkinState("openedDisabled")]

/**
 *  Closed Normal State
 *  
 *  @langversion 3.0
 *  @playerversion Flash 10
 *  @playerversion AIR 1.5
 *  @productversion Flex 4
 */
[SkinState("closedNormal")]

/**
 *  Closed Disabled State
 *  
 *  @langversion 3.0
 *  @playerversion Flash 10
 *  @playerversion AIR 1.5
 *  @productversion Flex 4
 */
[SkinState("closedDisabled")]


override protected function getCurrentSkinState():String {
	
	var state:String;
	if (opened) {
		state = enabled ? "openedNormal" : "openedDisabled";
	} else {
		state = enabled ? "closedNormal" : "closedDisabled";				
	}
	return state;
	
}

<fx:Script>
		<![CDATA[
		
			import mx.core.IVisualElement;
			
			import spark.events.RendererExistenceEvent;
			
			private var map:Dictionary = new Dictionary(true);
			
			private function onRendererAdd(event:RendererExistenceEvent):void {
				
				var index:int = event.index;
				var renderer:IVisualElement = event.renderer;
				
				if (!renderer) return;
				
				map[index] = renderer;
				MyRenderer(renderer).addEventListener(MyCustomEvent.ACTION, onItemRendererAction);
			}

			private function onRendererRemove(event:RendererExistenceEvent):void {
				
				var index:int = event.index;
				var renderer:IVisualElement = event.renderer;
				
				if (!renderer) return;
				
				delete map[index];
				MyRenderer(renderer).removeEventListener(MyCustomEvent.ACTION, onItemRendererAction);
			}
	]]>
</fx:Script>
<s:DataGroup id="buttons" top="300" height="100%"
			 rendererAdd="onRendererAdd(event)"
			 rendererRemove="onRendererRemove(event)"
			 itemRenderer="MyRenderer">
	<s:layout>
		<s:VerticalLayout gap="12" horizontalAlign="left" paddingLeft="20"/>
	</s:layout>
</s:DataGroup>