Flex Panel component with ControlBar docked to the top instead of bottom

Today someone asked on flexcoders if you can make the Panel component dock the ControlBar component to the top of the Panel instead of the bottom of the Panel. The short answer is no, you can’t. The longer answer is you can extend Panel and make a few minor adjustments and then yes, you can.

Here’s an extension of the Panel class that allows you to specify a new property: controlBarPosition, which can either be “top” or “bottom”.

The one caveat about this class is that if you set the control bar to be placed at the top, you should set the roundedBottomCorners style of the Panel to false. Otherwise the bottom corners of the control bar will be drawn rounded as well, which looks kind of weird if they’re not at the bottom of the panel (if you’re curious why take a look at the source of mx.skins.halo.HaloBorder, around line 470).

View the source.

This movie requires Flash Player 9.


10 thoughts on “Flex Panel component with ControlBar docked to the top instead of bottom

  1. hmm, using an ApplicationControlBar and docking it to the top of a Panel? I know an ApplicationControlBar is supposed to dock to the top of an Application, but I don’t think you can get it to dock to the top of a Panel. Let me know if I’m wrong.

  2. Ah yes… I stand corrected… for which I apologize. You would need to put the AppplicationControlBar within a VBox to do what I was trying to describe. Good catch.

  3. kasztan says:

    Hi! I’ve tried to use your component, but I have errors in flex3:
    1178: Attempted access of inaccessible property controlBar through a reference with static type com.dougmccune.controls:ExtendedPanel.controls. ExtendedPanel.as line 59
    As a beginner I can only guess what’s wrong 😉

    “private var controlBar:ControlBar;” delete the error, but the ControlBar doesn’t work properly at the top.

  4. Pingback: Extending Flex Panel With ActionScript | dougrdotnet

  5. Pingback: SOG knives

Comments are closed.