Flex3——同页面内子组件访问父组件的属性outerDocument

前提：

子组件脚本访问父组件脚本，

需要通过outerDocument属性来访问。

 

注意点：

父组件脚本中的变量必须是public，

子组件脚本需要包含在子组件标签内。

 

上玛：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:XMLList id="employees">
        <employee>
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
            <email>ccoenraets@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Joanne Wall</name>
            <phone>555-219-2012</phone>
            <email>jwall@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Maurice Smith</name>
            <phone>555-219-2012</phone>
            <email>maurice@fictitious.com</email>
            <active>false</active>
        </employee>
        <employee>
            <name>Mary Jones</name>
            <phone>555-219-2000</phone>
            <email>mjones@fictitious.com</email>
            <active>true</active>
        </employee>
    </mx:XMLList>
    
    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
            import mx.controls.Alert;
            
            public function getInfo(evt:ListEvent):void{
                textArea.text = "Name： " + dg.selectedItem.name + "\n" 
                               + "Phone： " + dg.selectedItem.phone + "\n" 
                               + "Email： " + dg.selectedItem.email;
            }
            
            public function getSyntax(syntax:String):void{
                Alert.show(syntax);
            }
            
        ]]>
    </mx:Script>
    
    <mx:Panel title="DataGrid Control Example" height="100%" width="100%" 
              paddingTop="10" paddingLeft="10" paddingRight="10">
        
        <mx:Label width="100%" color="blue" fontSize="15"
                  text="表格为DataGrid组件，下方显示信息的框为TextArea组件。"/>
        <mx:DataGrid id="dg" width="100%" height="200" rowCount="5" dataProvider="{employees}" itemClick="getInfo(event)">
            <mx:columns>
                <mx:DataGridColumn dataField="name" headerText="Name"/>
                <mx:DataGridColumn dataField="phone" headerText="Phone"/>
                <mx:DataGridColumn dataField="email" headerText="Email">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:HBox> 
                                <mx:Text width="100%" text="{data.email}" click="itemClick(event)">
                                    <mx:Script> 
                                        <![CDATA[ 
                                            public function itemClick(evt:MouseEvent):void{
                                                outerDocument.getSyntax(data.email);
                                            } 
                                        ]]> 
                                    </mx:Script> 
                                </mx:Text> 
                            </mx:HBox>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
            </mx:columns>
        </mx:DataGrid>
        <mx:TextArea id="textArea" width="100%" height="100" />
    </mx:Panel>
</mx:Application>