Error 1120: Access of undefined property

I have a <mx:Script> on the main file, where I define this:

[Bindable]
private var dpCols:ArrayCollection = new ArrayCollection([
{'prx':'bl', 'nmb':'Blanco', 'ral':'RAL1013', 'hex':'E8E4CD'},
{'prx':'am', 'nmb':'Amarillo', 'ral':'RAL1005', 'hex':'C79E03'},
{'prx':'gr', 'nmb':'Gris Perla', 'ral':'RAL7045', 'hex':'8E939E'}
 ]);

I can use it as a dataProvider in many places, but not here:

<mx:TileList dataProvider="{dpCols}">
    <mx:itemRenderer>
    <mx:Component>
        <mx:Box backgroundColor="{int('0x' + data.hex)}"
            height="64" width="72">
            <mx:Label text="{data.ral}" textAlign="center" width="100%"/>
            <mx:Label text="{data.nmb}" textAlign="center" width="100%"/>
        </mx:Box&开发者_如何学Pythongt;
    </mx:Component>
    </mx:itemRenderer>
</mx:TileList>

This TileList is within a <radg:RaDG> (my subclass for AdvancedDataGrid), <radg:columns>, <mx:AdvancedDataGridColumn>, <mx:itemEditor> and <mx:Component>. If I put it outside, it just works. But I need it to put it has the itemEditor.

How should I refer to dpCols then? (or how can I solve this error?)

Thanks!

---

You need outerDocument, since you're inside the <mx:Component> tag. See the "Using the Component Tag" section in this Adobe docs page or this SO question.

If you're getting particularly tricky with nesting, you may need to use parentDocument instead, but it sounds like outerDocument should work in your case (only one nesting of <mx:Component> tags).

Usage:

<mx:TileList dataProvider="{outerDocument.dpCols}" />