I noticed my copy/paste seems to have been messed up a little… here’s what the scalePanel function should be:

private function scalePanel(e:MouseEvent):void {
if ((stage.mouseX – x) > minWidth
&& (stage.mouseX – x) minHeight
&& (stage.mouseY – y) < maxHeight) {
height = (stage.mouseY – y);
}
}

Great simple component – was almost exactly what I was looking for! However to achieve the functionality my project requires, I made a few minor tweaks.

Firstly, I implemented Stephen Stulov’s suggestion about checking the existence of the resizer button in createChildren() so as to prevent duplicate creation of the resize button.

Secondly, I changed the resize method to obey the minWidth/minHeight & maxWidth/maxHeight properties. Nothin’ fancy, just additional constraint checking.

Thirdly, added a resize corner/handle icon (made a transparent PNG from the corner handle of Safari). You’ll need to create & correctly embed your handle image you want one.

Code:

package flexscript {

import flash.events.MouseEvent;

import mx.containers.Panel;
import mx.controls.Button;
import mx.managers.CursorManager;

public class ResizablePanel extends Panel {

[Embed(source="../../../../../assets/imgs/resize_handle.png")] public var resizeIcon:Class;

private var resizer:Button;

public function ResizablePanel() {
super();
}

override protected function createChildren():void {
super.createChildren();

if (resizer == null) {
resizer = new Button();
resizer.width = resizer.height = 14;
resizer.setStyle(“cornerRadius”, 0);
resizer.setStyle(“icon”, resizeIcon);

rawChildren.addChild(resizer);
resizer.addEventListener(MouseEvent.MOUSE_DOWN, resizeDown);
}
}

override protected function updateDisplayList(w:Number, h:Number):void {
super.updateDisplayList(w, h);
resizer.x = w – resizer.width;
resizer.y = h – resizer.height;
}

private function resizeDown(e:MouseEvent):void {
stage.addEventListener(MouseEvent.MOUSE_MOVE, scalePanel);
stage.addEventListener(MouseEvent.MOUSE_UP, stopScale);
}

private function scalePanel(e:MouseEvent):void {
if ((stage.mouseX – x) > minWidth
&& (stage.mouseX – x) minHeight
&& (stage.mouseY – y) < maxHeight) {
height = (stage.mouseY – y);
}
}

private function stopScale(e:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, scalePanel);
stage.removeEventListener(MouseEvent.MOUSE_UP, stopScale);
}
}
}

override protected function createChildren():void
{
super.createChildren();
if( resizer == null )
{
resizer = new Button();
resizer.height=10;
resizer.width = 10;
rawChildren.addChild(resizer);
}
}

Since createChildren() method is called every time the panel is added. Your method is good. But if you will removeChild() your panel, and then addChild() it again – createChildren() method will be called again, and button is reattached.