DataGrid Popup window

[MayJeff]

I want the datagrid result to be popup when click "Query" button.  I include my main application and titlewindow application (DataPopup.mxml).  Can anyone show me how to make it to work?  Thank you.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:esri="http://www.esri.com/2008/ags"
    pageTitle="Query, then zoom to results"
    styleName="plain">

    <mx:Script>
        <![CDATA[
            import com.esri.ags.geometry.Extent;
            import com.esri.ags.Graphic;
            import com.esri.ags.geometry.Polygon;
            import com.esri.ags.tasks.FeatureSet;
            import mx.controls.Alert;
            import mx.rpc.AsyncResponder;
            import mx.collections.ArrayCollection;
          
            import mx.managers.PopUpManager;

            import mx.managers.PopUpManagerChildList;
            import mx.events.ListEvent;
           
            private var highlightedGraphic:Graphic;

            [Bindable] private var lastIdentifyResultGraphic:Graphic;
 
 
   private function popupresult():void
   {
   var popData:DataPopup = new DataPopup;
   PopUpManager.addPopUp(popData,this,false,PopUpManagerChildList.POPUP);
   popData.MainMap = MainMap;
   popData.myGraphicsLayer= myGraphicsLayer;
   }
 
   private function onItemRollOver(event : ListEvent) : void
            {               
                if (highlightedGraphic) { highlightedGraphic.symbol = resultsSymbol; }            
                highlightedGraphic = findGraphicByAttribute(event.itemRenderer.data)
                highlightedGraphic.symbol = highlightSymbol;               
            }
            

         public function findGraphicByAttribute(attributes : Object) : Graphic
             {
                 for each( var graphic : Graphic in myGraphicsLayer.graphicProvider)
                 {
                     if ( graphic.attributes === attributes)
                     {
                         return graphic;
                     }
                 }           
                 return null;
             }
  
    private function sfDataGrid_Click():void
            {
                var obj:Object =popData.resultsGrid.selectedItem;
                if (obj != null)
                {
                    lastIdentifyResultGraphic = null;
                   
                    query.where = "STATE_NAME = '" + obj["STATE_NAME"] + "'"
                    queryTaskZoom.execute(query, new AsyncResponder(onResult, onFault));
                    function onResult(featureSet:FeatureSet, token:Object = null):void
                    {
                        lastIdentifyResultGraphic = featureSet.features[0];
                        lastIdentifyResultGraphic.symbol = resultsSymbol;
                        MainMap.extent = new Extent(lastIdentifyResultGraphic.geometry.extent.xmin,lastIdentifyResultGraphic.geometry.extent.ymin,lastIdentifyResultGraphic.geometry.extent.xmax,lastIdentifyResultGraphic.geometry.extent.ymax);
                    }
                    function onFault(info:Object, token:Object = null):void
                    {
                        Alert.show(info.toString(), "Query Problem");
                    }
                }
            }
 
            private function doQuery():void
            {
                query.text = fText.text
                query.where = ""
                queryTask.execute(query, new AsyncResponder(onResult, onFault));
                function onResult(featureSet:FeatureSet, token:Object = null):void
                {
                    // clear the graphics layer
                    myGraphicsLayer.clear();

                    if (featureSet.features.length == 0)
                    {
                        Alert.show("No States found. Please try again.");
                    }
                    else
                    {
                     popupresult();
                        var unionExtent:Extent;
                        var myFirstGraphic:Graphic = featureSet.features[0];
                        unionExtent = Polygon(myFirstGraphic.geometry).extent;

                        for each (var myGraphic1:Graphic in featureSet.features)
                        {
                            myGraphicsLayer.add(myGraphic1);
                            unionExtent = unionExtent.union(Polygon(myGraphic1.geometry).extent);
                        }

                        MainMap.extent = unionExtent;
                    }
                }
                function onFault(info:Object, token:Object = null):void
                {
                    Alert.show(info.toString());
                }
            }
           
          
        ]]>
    </mx:Script>

    <!-- Start Declarations -->
        <!-- Symbol for Query Result as Polygon -->
        <esri:SimpleFillSymbol id="resultsSymbol" color="0x999999" alpha="0.01" style="solid">
        <esri:SimpleLineSymbol color="0x00FFFF" width="2" alpha="1" style="solid" />
     </esri:SimpleFillSymbol>
        <esri:SimpleFillSymbol id="highlightSymbol" color="0xFF0000" outline="{borderSymbol}"/>
     <esri:SimpleLineSymbol id="borderSymbol" color="0x706D69" />
   
        <!-- Layer with US States -->
        <esri:QueryTask id="queryTask"
            url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5"/>
        <esri:QueryTask id="queryTaskZoom"
            url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5"/>

   
        <esri:Query id="query" text="{fText.text}" returnGeometry="true" outSpatialReference="{MainMap.spatialReference}">
            <esri:outFields>
                <mx:String>MED_AGE</mx:String>
                <mx:String>POP2007</mx:String>
            </esri:outFields>
        </esri:Query>
    <!-- End Declarations -->

    <mx:HBox width="100%" height="40" backgroundColor="0xDDDDFF" paddingTop="10" horizontalAlign="center">
        <mx:Text text="Search for U.S. States:"/>
        <mx:TextInput id="fText" enter="doQuery()" text="Ca"/>
        <mx:Button label="Query" click="doQuery()"/>
    </mx:HBox>
    <mx:Text id="resultSummary" height="15"/>
    <mx:VDividedBox height="100%" width="100%">
        <esri:Map id="MainMap">
            <esri:extent>
                <esri:Extent xmin="-126" ymin="24" xmax="-67" ymax="50">
                    <esri:SpatialReference wkid="4326"/>
                </esri:Extent>
            </esri:extent>
            <esri:ArcGISDynamicMapServiceLayer
                url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer"/>
            <esri:GraphicsLayer id="myGraphicsLayer" symbol="{resultsSymbol}" graphicProvider="{lastIdentifyResultGraphic}"/>
        </esri:Map>
        <!--mx:DataGrid id="resultsGrid" click="sfDataGrid_Click()"
         itemRollOver="onItemRollOver(event)"
            dataProvider="{queryTask.executeLastResult.attributes}"
            scroll="true" width="100%" height="40%"/-->
    </mx:VDividedBox>
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" title="Results">

<mx:Script>
<![CDATA[

 
     import mx.controls.DataGrid;
                 import mx.collections.ArrayCollection;
     import mx.controls.Alert;
     import mx.managers.PopUpManager;
     import com.esri.ags.Map;
     import com.esri.ags.layers.GraphicsLayer;

     [Bindable] public var MainMap:Map;
     [Bindable] public var myGraphicsLayer:GraphicsLayer;

    
 
]]>
</mx:Script>

        <mx:DataGrid id="resultsGrid" click="sfDataGrid_Click()"
         itemRollOver="onItemRollOver(event)"
            dataProvider="{queryTask.executeLastResult.attributes}"
            scroll="true" width="100%" height="40%"/>
</mx:TitleWindow>