Flex 4 DataGrid with floating toolbox ItemRenderer

Question

At my project I've a DataGrid component that holds some information and, at the final column I need to put a floating tool box.

The idea is when the user hit on the icon's tool box, it appears above a floating tool box like a menu holding some icons to perform different actions.

So far, I've solved the column's ItemRenderer to show the dispatcher tool box icon but to show the upper floating tool box is something that I still can't solve. I've tried to make a custom component ( it's a Canvas that holds a HBox that contains the action's icons ) to hold the tool box's icons and showing it by a Menu control (mx.control.Menu) like this:

    private function createAndShow():void {
        var myCustomMenu:CustomContextMenu = new CustomContextMenu();
        var myMenu:Menu = Menu.createMenu(this, myCustomMenu, false);
        myMenu.show(btnToolBox.x + 10, btnToolBox.y + 10);
    }

But this approach shows a weird container at the left and top of the page instead of show it at the given point i.e. (btnToolBox.x + 10, btnToolBox.y + 10).

So, can anybody help my out with this?

I was searching through the Internet looking for some examples but, I can't found anything that can help me to accomplish this situation so, if anyone knows a way to solve this or at least can point me somehow, any suggestions would be gratefully appreciated.

Answer 1

Finally, after a long research I found an answer. I created a Custom Component that uses a PopUpAnchor and solution looks like this

<s:PopUpAnchor id="hDropDown" x="{btnToolBox.x-options1.width+30}" y="{btnToolBox.y-6}" includeInLayout="false" 
               showEffect="{showEffects}" hideEffect="{hideEffects}">
    <s:BorderContainer minHeight="0" id="options1" mouseDownOutside="{hDropDown.displayPopUp=false}" 
                       cornerRadius="2" borderWeight="1" borderColor="gray" backgroundColor="black">
        <s:layout>
            <s:HorizontalLayout gap="5" paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5" />
        </s:layout>
    </s:BorderContainer>
</s:PopUpAnchor>