[flexcoders] PopUp / GridItem / localToGlobal

[mark00bradley]

Hi all,

I am trying to outline some GridItem components with a popup canvas
component.  I have it working nicely if the Grid is not in a popup,
but once it is contained in the popup, I run into problems, as the
GridItem gives me an x value that appears to be incorrect.

Can anyone tell me how to get the correct coordinates of GridItem in
this situation?  

Thanks!

For an example of what I am seeing, please run this simple example and
click through the four cells:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; width="100%"
height="100%" layout="absolute" creationComplete="moveIntoPopup( event )">
  <mx:Script>
 <![CDATA[
    import mx.managers.PopUpManager;
    import mx.containers.*;
    import mx.core.UIComponent;
        
    private var outline:Canvas;
    
    public function outlineMe( ev:MouseEvent ): void {
        var cell:GridItem = GridItem( ev.currentTarget );       
        var p:Point = new Point( cell.x, cell.y );
        p = cell.localToGlobal( p );
        
        coords.htmlText = "x: " + p.x + " y:" + p.y;
        
        if ( outline ) {
           PopUpManager.removePopUp( outline );
        }
        
        outline = new Canvas();
        outline.setStyle( "borderColor", 0x0 );
        outline.setStyle( "borderStyle", "solid" );
        outline.setStyle( "borderThickness", "1" );     
        outline.x = p.x;
        outline.y = p.y
        outline.width = cell.width;
        outline.height = cell.height;
        
        PopUpManager.addPopUp( outline, DisplayObject(
Application.application ) );
    }
    
    public function moveIntoPopup( ev:Event ): void {
        removeChild( popup );
        PopUpManager.addPopUp( popup, DisplayObject(
Application.application ) );
        PopUpManager.centerPopUp( popup );
    }
 ]]>
 </mx:Script>
  <mx:TitleWindow id='popup' title="Click a cell">
    <mx:Grid>
     <mx:GridRow>
      <mx:GridItem id='a' mouseDown="outlineMe(event)"><mx:Label
text="a"/></mx:GridItem>
      <mx:GridItem id='b' mouseDown="outlineMe(event)"><mx:Label
text="b"/></mx:GridItem>
      <mx:GridItem id='c' mouseDown="outlineMe(event)"><mx:Label
text="c"/></mx:GridItem>
      <mx:GridItem id='d' mouseDown="outlineMe(event)"><mx:Label
text="d"/></mx:GridItem>
     </mx:GridRow>
    </mx:Grid>
   <mx:Text id='coords'/>
 </mx:TitleWindow>
</mx:Application>