Anchor a button upper right in a panel?

Question

Have to anchor a button upper right in a panel.  Need it to stay anchored even when I use resize and move effects on the panel.  Want the button up top, not in the panel's content pane.
The only way I know to get a button up there is to put it in the panel's titleBar.  If I want it to be anchored I'll have to put it in a container that supports constraints, like a Canvas, before putting it in the titleBar.  When I do this, constraints seem to go out the window.  They work somewhat but behave abnormally. 
Here's a sample app (2 files) implementing this approach.  Compile and click the button down below.  The large panel with the button in its titleBar is supposed to shrink and hide behind the little video window.  It does, but the button in its titleBar doesn't go along for the ride.  It's not constrained.  Is there another approach to this?
Main app file (constraints.mxml) followed by custom panel file (CustomPanel.mxml)...
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:custom="*"
    layout="absolute"
    initialize="init()">
    <mx:Script>
        <![CDATA[       
            [Bindable]
            private var vidX:Number;
            [Bindable]
            private var vidY:Number;
            [Bindable]
            private var vidW:Number;
            [Bindable]
            private var vidH:Number;
            [Bindable]
            private var panelX:Number;
            [Bindable]
            private var panelY:Number;
            [Bindable]
            private var panelW:Number
            [Bindable]
            private var panelH:Number;
            private var open:Boolean = true;
            public function init():void
                vidX = 20;
                vidY = 20;
                vidW = 180;
                vidH = 120;
                panelX = 202;
                panelY = 20;
                panelW = 500;
                panelH = 350;               
            private function onButtonClick(e:MouseEvent):void
                if(open)
                    inAndDownSize.play();
                    open = false;
                else
                    outAndUpSize.play();
                    open = true;
        ]]>
    </mx:Script>
    <!--  Effects -->
    <mx:Parallel id="outAndUpSize"
        duration="200">
        <mx:Move
            target="{panel}"
            xFrom="{vidX}" xTo="{panelX}"/>
        <mx:Resize
            target="{panel}"
            widthTo="{panelW}" heightTo="{panelH}"/>   
    </mx:Parallel>
    <mx:Parallel id="inAndDownSize">
        <mx:Move
            target="{panel}"
            xFrom="{panelX}" xTo="{vidX}"/>
        <mx:Resize
            target="{panel}"
            widthTo="{vid.width}" heightTo="{vid.height}"/>
    </mx:Parallel>
    <!--UI elements -->
    <custom:CustomPanel id="panel"
        x="{panelX}" y="{panelY}"
        width="{panelW}" height="{panelH}"
        layout="absolute">
    </custom:CustomPanel>   
    <mx:VideoDisplay id="vid"
        x="{vidX}" y="{vidY}"
        width="{vidW}" height="{vidH}"/>
    <mx:Button
        label="Click"
        horizontalCenter="0"
        bottom="10"
        click="onButtonClick(event)"/>
</mx:Application>
CustomPanel.mxml...
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    initialize="init()"
    creationComplete="onCreationComplete()">   
    <mx:Script>
        <![CDATA[
            import mx.containers.Canvas;
            import mx.controls.Button;       
            private var button:Button = new Button();
            private var canvas:Canvas = new Canvas();
            private var style:CSSStyleDeclaration = new CSSStyleDeclaration();   
            private function onCreationComplete():void
                canvas.width = parent.width;
                canvas.height = parent.height;               
                style.setStyle("left", 400);
                button.id = "button";
                button.label = "b";
                button.width = 30;
                button.height = 30;               
                button.styleDeclaration = style;
                canvas.addChild(button);
                this.titleBar.addChild(canvas);
        ]]>
    </mx:Script>   
</mx:Panel>

Answer 1

Hi,
There is not need to use Canvas to position it. override the updateDisplayList method and move the button. Check the code below.
<mx:Script>
        <![CDATA[
            import mx.controls.Button;
            private var button:Button;
            private var style:CSSStyleDeclaration = new CSSStyleDeclaration();  
               override protected function createChildren():void
                   super.createChildren();
                   button = new Button();
                   button.label = "b";
                button.styleDeclaration = style;
                titleBar.addChild(button);
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                super.updateDisplayList(unscaledWidth,unscaledHeight);
                button.width = 30;
                button.height = 30;
                //move button to the top right
                button.move(width - button.width - 5, 5);
        ]]>
    </mx:Script>