Dynamically position a Flex popup relative to a button mouse click

I was having trouble with positioning a wide popup window that was in a component nested several containers deep.  The PopUpManager.centerPopUp method would center on the container and push the window off the right edge of the screen.  To correct this, I moved the popup over 100 pixels using:

popup.x = popup.x – 100;

That worked, but the problem would come back if the window grew wider.  Bush league.  To make it a bit more reliable, I changed to use the mouseEvent localX/Y properties.  Note you have to convert the “local” coordinates to “global”:

 

      private function showPopup(event:MouseEvent):void

        {

            pop = EnotaryRegReturnPopup(PopUpManager.createPopUp(this,EnotaryRegReturnPopup,true));

            pop.title = "Please select return reasons.";

            pop.showCloseButton =true;

            pop.enotaryRegReturnList = this.enotaryRegReturnList;

            pop.buildUnselectedReturns();

           

                  // position the window next to the "add" button

            var pt:Point = new Point(event.localX, event.localY);

            pt = event.target.localToGlobal(pt);

            pop.x = pt.x - pop.width;

            pop.y = pt.y;

           

            pop.addEventListener("close",removeMe);

            pop["cancelButton"].addEventListener("click", removeMe);

            pop["okButton"].addEventListener("click",processReturns);

        }