Monday, October 26, 2009

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;



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

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

            pt =;

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

            pop.y = pt.y;



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





No comments: