Custom context menus on nested components

What do you do if your application needs custom context menus for components that are not at the application level but rather are nested within other containers or components?

You can change the Application level context menu when an event (such as mouse over) is triggered from your nested component, and reset the Application menu on another event (such as mouse out).

According to the Flex documentation, “In Flex, only top-level components in the application can have context menus. For example, if a DataGrid control is a child of a TabNavigator or VBox container, the DataGrid control cannot have its own context menu.”

Below is a simple example that changes the Application level context menu when the user mouses over a button nested within an HBOX and resets the context menu when the user mouses off the button.

You can see the working example here and you can right-click on it to view the source.

OK, well this example worked great but as it turns out the documentation for AS3 on ContextMenu is actually WRONG, as someone was nice enough to point out on my Flex Cookbook Beta entry on this topic. To quote him,

“All DispalyObjects in Flex have a property called ‘contextMenu’ and you can set the context menu on any DisplayObject with this. The documentation is actually wrong. It doesn’t matter where in the display heirarchy the object is.”

For more on this topic see the Cookbook entry

About Fuad Kamal

principal & senior architect, Anaara Media LLC
This entry was posted in ActionScript, Flex. Bookmark the permalink.

Comments are closed.