Apache flex 调整容器大小

我有一个拖板，还有。。。。在里面我有 1.Vbox
1.1. Hbox
1.1.1垫片
1.1.2图像
1.1.3图像
1.2. 标签

我需要获得此图形：

----------
||
||
|カカカ
|：/º|
|：/º|
|：/º|
|カカカ
||
----------

但我明白了：

----------
||
||
||
||
||
||
|カカカ
|：/º|
|：/º|
|：/º|
|カカカ
||
||
||
||
||
----------

请帮帮我

这是我的代码：

// //调整事件处理程序的大小。 //

//正在调整大小的保存面板。
保护var树脂面板：面板；
//面板左下角的全局坐标。
受保护的var initX:Number；
保护变量：数字；
//调整面板单击区域的大小。
受保护的函数resizeHandler（事件：MouseEvent）：void
{
resizingPanel=面板（event.target）；
initX=event.localX；
initY=event.localY；
//将橡皮筋放在面板上。
rbComp.x=事件.target.x；
rbComp.y=事件目标y；
rbComp.height=event.target.height；
rbComp.width=event.target.width；
//确保橡皮筋位于所有其他部件的顶部。
v1.setChildIndex（rbComp，v1.numChildren-1）；
rbComp.visible=真；
//添加事件处理程序，以便SystemManager处理
//mouseMove和mouseUp事件。
//将useCapure标志设置为true以处理这些事件
//在捕获阶段，因此没有其他组件尝试处理它们。
systemManager.addEventListener（MouseEvent.MOUSE_MOVE，mouseMoveHandler，true）；
systemManager.addEventListener（MouseEvent.MOUSE\u UP，mouseHandler，true）；
}
//当用户移动光标时调整橡皮筋的大小
//按下鼠标键。
受保护的函数mouseMoveHandler（事件：MouseEvent）：void
{
事件。stopImmediatePropagation（）；
rbComp.height=rbComp.height+event.stageY-initY；
rbComp.width=rbComp.width+event.stageX-initX；
initX=event.stageX；
initY=event.stageY；
}
//将面板的尺寸调整为安装时橡皮筋的尺寸
//用户释放鼠标键。
//还将从SystemManager中删除事件处理程序。
受保护函数MouseHandler（事件：MouseEvent）：无效
{
事件。stopImmediatePropagation（）；
//使用最小尺寸为150 x 50的面板。
如果（rbComp.height你的拖板高度设置为100%，这将导致它垂直填充画布。虽然我不太明白你想做什么，但这似乎是你的问题。
当你说“这个图形”时，我不明白你想得到什么。
<mx:Script>
    <![CDATA[
        import mx.managers.DragManager;
        import mx.core.DragSource;
        import mx.events.DragEvent;
        import flash.events.MouseEvent;
        import mx.containers.Canvas;
        import mx.containers.Panel;
        import myComponents.DragPanel;
        import mx.controls.Image;


        [Embed("images/circulo.png")]
        private var imagen1:Class;

        [Embed("images/circulo.png")]
        private var imagen2:Class;

        private var original:BitmapData;
        private static const MY_WIDTH:uint = 342;
        private static var MY_HEIGHT:uint = 336;

        // Define static constant for event type.
        public static const RESIZE_CLICK:String = "resizeClick";

        private function setResize():void
        {
            dp1.title = "CanvasDD: " + dp1.width + ", " + dp1.height;
        }

        // Creation complete handler for each panel to add the 
        // mouseMove event handler to the title bar. 
        // Clicking the mouse button, then moving the mouse on the title bar
        // initiates the d&d operation. 
        private function myPanelCCHandler(event:Event):void 
        {
            event.currentTarget.myTitleBar.addEventListener(MouseEvent.MOUSE_DOWN, tbMouseMoveHandler);
        }

        // Variables used to hold the mouse pointer's location in the title bar.
        // Since the mouse pointer can be anywhere in the title bar, you have to 
        // compensate for it when you drop the panel. 
        public var xOff:Number;
        public var yOff:Number;

        // Function called by the canvas dragEnter event; enables dropping
        private function doDragEnter(event:DragEvent):void 
        {
            DragManager.acceptDragDrop(Canvas(event.target));
        }

        // Drag initiator event handler for
        // the title bar's mouseMove event.
        private function tbMouseMoveHandler(event:MouseEvent):void 
        {
            var dragInitiator:Panel=Panel(event.currentTarget.parent);
            var ds:DragSource = new DragSource();
            ds.addData(event.currentTarget.parent, 'panel'); 

            // Update the xOff and yOff variables to show the
            // current mouse location in the Panel.  
            xOff = event.currentTarget.mouseX;
            yOff = event.currentTarget.mouseY;

            // Initiate d&d. 
            DragManager.doDrag(dragInitiator, ds, event);                    
        }            

        // Function called by the Canvas dragDrop event; 
        // Sets the panel's position, 
        // "dropping" it in its new location.
        private function doDragDrop(event:DragEvent):void 
        {
            // Compensate for the mouse pointer's location in the title bar.
            var tempX:int = event.currentTarget.mouseX - xOff;
            event.dragInitiator.x = tempX;

            var tempY:int = event.currentTarget.mouseY - yOff;
            event.dragInitiator.y = tempY;

            // Put the dragged panel on top of all other components.
            v1.setChildIndex(Panel(event.dragInitiator), v1.numChildren-1);         
        }

        // Save panel being resized.
        protected var resizingPanel:Panel;
        // Global coordinates of lower left corner of panel.
        protected var initX:Number;
        protected var initY:Number;

        // Resize area of panel clicked.
        protected function resizeHandler(event:MouseEvent):void
        {
            resizingPanel = Panel(event.target);
            initX = event.localX;
            initY = event.localY;

            // Place the rubber band over the panel. 
            rbComp.x = event.target.x;
            rbComp.y = event.target.y;
            rbComp.height = event.target.height;
            rbComp.width = event.target.width;

            // Make sure rubber band is on top of all other components.
            v1.setChildIndex(rbComp, v1.numChildren-1);
            rbComp.visible=true;

            // Add event handlers so that the SystemManager handles 
            // the mouseMove and mouseUp events. 
            // Set useCapure flag to true to handle these events 
            // during the capture phase so no other component tries to handle them.
            systemManager.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler, true);
            systemManager.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler, true);
        }

        // Resizes the rubber band as the user moves the cursor 
        // with the mouse key down.
        protected function mouseMoveHandler(event:MouseEvent):void
        {
                event.stopImmediatePropagation();       

                rbComp.height = rbComp.height + event.stageY - initY;  
                rbComp.width = rbComp.width + event.stageX - initX;

                initX = event.stageX;
                initY = event.stageY;                       
        }

        // Sizes the panel to the size of the rubber band when the 
        // user releases the mouse key. 
        // Also removes the event handlers from the SystemManager.
        protected function mouseUpHandler(event:MouseEvent):void
        {
            event.stopImmediatePropagation();       

            // Use a minimum panel size of 150 x 50.
            if (rbComp.height <= 50)
            {
                resizingPanel.height = 50;  
            }
            else
            {
                resizingPanel.height = rbComp.height;               
            }               

            if (rbComp.width <= 150)
            {
                resizingPanel.width = 150;              
            }
            else
            {
                resizingPanel.width = rbComp.width;             
            }               

            // Put the resized panel on top of all other components.
            v1.setChildIndex(resizingPanel, v1.numChildren-1);

            // Hide the rubber band until next time.
            rbComp.x = 0;
            rbComp.y = 0;
            rbComp.height = 0;
            rbComp.width = 0;
            rbComp.visible = false;

            systemManager.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler, true);
            systemManager.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler, true );
        }

        private function handleImageComplete(event: Event): void 
        {
            var bitmap: Bitmap = ((event.target as Image).content as Bitmap);
            if (bitmap != null) 
            {
                bitmap.smoothing = true;
            }
        }

        // Creation complete event handler adds the resizing event. 
        // resizeButtonClicked is a custom event type for this application.
        protected function creationCompleteHandler():void
        {
            addEventListener(RESIZE_CLICK, resizeHandler);
            setResize();
        }

    ]]>
</mx:Script>

<!-- The Canvas is the drag target --> 
<mx:Canvas id="v1" 
    width="500" height="500"  
    borderStyle="solid" 
    backgroundColor="#DDDDDD"
    dragEnter="doDragEnter(event);" 
    dragDrop="doDragDrop(event);">

<myComp:DragPanel  id="dp1" title="Drag Panel 1"
    paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"
    x="19" y="10"
    horizontalAlign="center" verticalAlign="middle"
    width="30%"
    height="100%"
    resize="setResize()"
    creationComplete="myPanelCCHandler(event);">

    <mx:VBox id="vbox" width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
        <mx:HBox id="hbox" width="100%" height="100%" borderStyle="solid" borderColor="0x000000" backgroundColor="green">
            <mx:Spacer width="15"/>
            <mx:Image id="img"
                width="100%" height="100%"
                scaleContent="true"
                horizontalAlign="center" verticalAlign="middle"     
                source="{imagen1}"/>
             <mx:Image id="select" source="{imagen2}" width="15" height="15" verticalAlign="top" horizontalAlign="right"/>
        </mx:HBox>          
        <mx:Label text="circle"/>       
    </mx:VBox>


</myComp:DragPanel>

<myComp:RubberBandComp id="rbComp" x="0" y="0" height="0" width="0" visible="false"/>

</mx:Canvas>