tilelist component arrayCollection

[tsj4]

I have a custom titleWindow component which is my shopping cart and includes a tilelist and I want to tilelist dataprovider to point to an arraycollection which I defined in the main application. Even though my arraycollection is public the tilelist in not in scope of it. How can I access the arraycollection from the custom component.

component

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="400" height="300" title="Your Cart" showCloseButton="true" close="//PopUpManager.removePopUp(this)" >
<mx:Metadata>
[Event(name="checkOut", type="flash.events.Event")]
[Event(name="clear", type="flash.events.Event")]
</mx:Metadata>

<mx:Script>
<![CDATA[
import mx.controls.Alert
import mx.managers.PopUpManager;

private function checkOutHandler():void
{
var e:Event = new Event("checkOut");
Alert.show("check out")

}
private function clearHandler():void
{
var e:Event = new Event("clear");
Alert.show("clear event")
}
]]>
</mx:Script>

<mx:TileList id="cartList" itemRenderer="CartRenderer" columnWidth="94" columnCount="1" direction="vertical" width="380" height="224"/>
<mx:ControlBar>
<mx:Button id="clearCart" label="Clear" click="clearHandler()"/>
<mx:Button id="checkOut" label="Check Out" click="checkOutHandler()"/>
</mx:ControlBar>

</mx:TitleWindow>



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="0x000000" backgroundGradientColors="[0x000000, 0x333333]" creationComplete="init()" xmlns:local="*">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
public cartItems:ArrayCollection = new ArrayCollection();

]>

.........

[tsj4]

In the main app I defined the app as


private var cart:ShoppingCart = new ShoppingCart();


to target the tilelist

cart.cartList.dataProvider = cartItems;