Changing MouseCursor over Panel bottom border

[zidaninho]

Hi,

I have a Custom Panel component, which I can resize by MouseDownEvent at the bottom border of the panel.

I would like to have the MouseCursor changed when beeing over this bottom border of my panel (only when at the bottom border, not over the whole panel).

How can I realise this?

This is my sourceCode of the panel:
And the method onMouseDown is the one which resizes the panel on MouseDown at the bottom Border.


package de.cgchartsdemo.view
{
import de.cgchartsdemo.events.*;
import de.cgchartsdemo.model.ModelLocator;

import flash.events.Event;
import flash.events.MouseEvent;

import mx.containers.Panel;
import mx.controls.Button;
import mx.controls.CheckBox;
import mx.effects.Resize;

public class ChartPanelResize extends mx.containers.Panel
{
[Embed(source="de/cgchartsdemo/assets/img/dividerWhite.png")]
private static var resizeCursor:Class;

public function ChartPanelResize()
{
super();
this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
}
private function onMouseDown(event:MouseEvent):void {
var lowerLeftX:Number = x + width;
var lowerLeftY:Number = y + height;

var upperLeftX:Number = lowerLeftX - 7;
var upperLeftY:Number = lowerLeftY - 7;

var panelRelX:Number = event.localX + x;
var panelRelY:Number = event.localY + y;


if (upperLeftX >= panelRelX && panelRelX <= lowerLeftX) //bottom border of the Panel
{

if (upperLeftY <= panelRelY && panelRelY <= lowerLeftY)
{
event.stopPropagation();

origWidth = width;
origHeight = height;
this.xOffset = parent.mouseX;
this.yOffset = parent.mouseY;
parent.addEventListener(MouseEvent.MOUSE_MOVE, resizePanel);
parent.addEventListener(MouseEvent.MOUSE_UP, stopResizePanel);
}
}
}

private function resizePanel(event:MouseEvent):void {

if ((origHeight + (parent.mouseY - yOffset)) > titleBar.height){
height = origHeight + (parent.mouseY - yOffset);
}
}

private function stopResizePanel(event:MouseEvent):void {
if (parent)
parent.removeEventListener(MouseEvent.MOUSE_MOVE, resizePanel);

else
trace ("NO PARENT");
}

override protected function updateDisplayList(w:Number, h:Number):void {
super.updateDisplayList(w,h);
this.setStyle("headerHeight", 10);
this.setStyle("borderThicknessLeft", 0);
this.setStyle("borderThicknessRight", 0);
this.setStyle("borderThicknessTop", 1);
this.setStyle("borderThicknessBottom", 5);
this.setStyle("borderColor", 0xFFCCCC);
this.setStyle("backgroundAlpha", 0);
}
}
}

It would be great if somebody has a hint or a solution for me.

Thank you.

[JeTSpice]

there's a superPanel component on flexlib. That might show you how they did it.

http://code.google.com/p/flexlib/