Flex4 中 Itemrender与父容器交互 outerDocument使用实例

<?xml version="1.0" encoding="utf-8"?>
<!--created:Aug 28, 2010 file:FAQ.mxml  author:Michael -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               backgroundColor="0xdddddd" viewSourceURL="srcview/index.html">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            public function genData():ArrayCollection
            {
                var myArrayCollection:ArrayCollection=new ArrayCollection(this.cellPhoneData.product as Array);
                return myArrayCollection;
 
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <fx:Model source="assets/catalog.xml"
                  id="cellPhoneData"/>
    </fx:Declarations>
    <s:layout>
        <s:VerticalLayout verticalAlign="middle"
                          horizontalAlign="center"/>
    </s:layout>
    <s:BorderContainer width="200"
                       height="200"
                       dropShadowVisible="true"
                       borderVisible="false"
                       chromeColor="0x8b8f94"
                       symbolColor="0">
        <s:Scroller width="100%"
                    height="100%">
            <s:DataGroup dataProvider="{genData()}"
                         width="100%"
                         clipAndEnableScrolling="true">
                <s:layout>
                    <s:VerticalLayout gap="0"
                                      useVirtualLayout="true"/>
                </s:layout>
                <s:itemRenderer>
                    <fx:Component>
                        <s:ItemRenderer width="100%">
                            <s:BorderContainer width="100%"
                                               height="50"
                                               dropShadowVisible="true"
                                               cornerRadius="5"
                                               backgroundColor="0xd5d5d5">
                                <s:layout>
                                    <s:HorizontalLayout horizontalAlign="left"
                                                        verticalAlign="middle"
                                                        paddingLeft="10"
                                                        gap="10"/>
                                </s:layout>
                                <s:BorderContainer cornerRadius="2"
                                                   width="17"
                                                   height="16"
                                                   click="bordercontainer1_clickHandler(event)">
 
                                    <s:layout>
                                        <s:VerticalLayout horizontalAlign="center"
                                                          verticalAlign="middle"/>
                                    </s:layout>
 
                                    <fx:Script>
                                        <![CDATA[
                                            protected function bordercontainer1_clickHandler(event:MouseEvent):void
                                            {
                                                outerDocument.resultBC.visible=true;
                                                outerDocument.img.load(data.image);
                                                outerDocument.resultLabel.text=data.description;
                                                outerDocument.resultLabel.toolTip=data.name + "n$ " + data.price + "nn" + data.description;
                                            }
                                        ]]>
                                    </fx:Script>
 
                                    <mx:Image source="images/icon_magnifier.png"
                                              toolTip="enlarge"/>
                                </s:BorderContainer>
                                <mx:Image width="40"
                                          height="40"
                                          source="{data.image}"/>
                                <s:Label fontWeight="bold"
                                         text="{data.name}"/>
                            </s:BorderContainer>
                        </s:ItemRenderer>
                    </fx:Component>
                </s:itemRenderer>
            </s:DataGroup>
        </s:Scroller>
    </s:BorderContainer>
    <s:BorderContainer width="200"
                       height="150"
                       backgroundColor="0xd5d5d5"
                       bottom="0"
                       cornerRadius="5"
                       visible="false"
                       showEffect="Fade"
                       id="resultBC">
        <s:HGroup left="5"
                  top="10"
                  right="5"
                  bottom="10">
            <mx:Image id="img"
                      width="50"/>
            <s:Label id="resultLabel"
                     width="60%"
                     height="60%"/>
        </s:HGroup>
    </s:BorderContainer>
</s:Application>