<s:BorderContainer>

   <s:DataGroup width="500" height="420" 

    dataProvider="{_model.userProjects}"

       itemRenderer="itemRenderers.TheWallIR">

    <s:layout>

     <layouts:CustomBasicLayout useVirtualLayout="true"/>

    </s:layout>

   </s:DataGroup>

  </s:BorderContainer>

<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="false"

    x="{_data.position.x}"

    y="{_data.position.y}"

    creationComplete="itemrenderer1_creationCompleteHandler(event)">

 <fx:Script>

  <![CDATA[

   import mx.events.FlexEvent;

 

   import Project.ProjectVO;

 

   [Bindable]

   protected var _data:Object;

 

   override public function set data(value:Object):void

   {

    _data=value;

    trace("IR data="+_data);

   }

 

   protected function itemrenderer1_creationCompleteHandler(event:FlexEvent):void

   {

    trace("ir creation complete "+_data.position.x+" "+_data.position.y);

   }

  ]]>

 </fx:Script>

 

 <s:Group width="100%" height="100%">

 

  <s:Group id="maskGroup" width="300" height="300">

   <s:Rect width="100%" height="100%" radiusX="6" radiusY="6">

    <s:fill>

     <s:SolidColor color="0xff0000"/>

    </s:fill>

   </s:Rect>

  </s:Group>

  <s:Image id="image" source="{_data.compill}" 

     width="300" 

     height="300"

     mask="{maskGroup}"/>

 </s:Group>

 

</s:ItemRenderer>

package layouts

{

 import mx.core.IVisualElement;

 

 import spark.layouts.BasicLayout;

 import spark.layouts.supportClasses.LayoutBase;

 

 public class CustomBasicLayout extends LayoutBase

 {

  protected var _index:uint;

 

  public function CustomBasicLayout()

  {

   useVirtualLayout=true;

   super();

  }

 

  override public function updateDisplayList(width:Number, height:Number):void 

  {

   var count:int = target.numElements;

 

   for (var i:uint = 0; i < count; i++) 

   {

    var element:IVisualElement = target.getVirtualElementAt(i);

    var elementPosBoundsX:Number=element.getLayoutBoundsX()+element.getLayoutBoundsWidth();

    var elementPosBoundsY:Number=element.getLayoutBoundsY()+element.getLayoutBoundsHeight();

 

    element.setLayoutBoundsSize(element.getPreferredBoundsWidth(), element.getPreferredBoundsHeight());

 

    if(element.getLayoutBoundsX()<target.getLayoutBoundsX() || element.getLayoutBoundsY()<target.getLayoutBoundsY() || elementPosBoundsX>target.getLayoutBoundsWidth() || elementPosBoundsY>target.getLayoutBoundsHeight())

    {

     trace("ELEMENT outside bounds !!!");

     element.includeInLayout = false;

    }

    else

    {

     trace("ELEMENT inside bounds !!!");

     element.includeInLayout = true;

    }

   }

  }

 }

}