i am developing using flex 3.0 and was trying to expand on some of
the item renderer examples that i saw at alex's flex closet, but i
ran into some trouble. i am trying to create a renderer that has a
clickable image and a text component. i decided to subclass TextInput
and add a preceding image but it just doesn't render properly. when
first displayed, the image is positioned at x=-8, y=-8 despite
explicitly setting the x and y coordinates. when the mouseover forces
a redraw, the image is properly positioned. also, there appears to be
a thin border at the bottom of the cell that i cannot get rid of. any
help would be appreciated. the code is listed below. i am new to
flex, so alternatives to this approach are welcome.
thanks
ublic class ParameterRenderer extends TextInput
{
private var image:Image;
public function ParameterRenderer()
{
super();
setStyle("borderStyle", "none");
setStyle("paddingBottom", 0);
}
override public function validateNow():void
{
// see BackgroundColorRenderer
}
override protected function updateDisplayList(w:Number,
h:Number):void {
super.updateDisplayList(w, h);
// lifted from CenteredImage
if (image.content) {
var contentHolder:Loader = image.content.parent as Loader;
contentHolder.width = contentHolder.contentLoaderInfo.width;
contentHolder.height = contentHolder.contentLoaderInfo.height;
contentHolder.x = textField.x;
contentHolder.y = (h - contentHolder.contentLoaderInfo.height) / 2;
}
}
override protected function createChildren():void {
super.createChildren();
textField.selectable = false;
if (!image) {
image = new Image();
// attempt to get image to position properly
image.width = 16;
image.height = 16;
image.source = "../img/delete2.gif";
addChild(DisplayObject(image));
image.addEventListener(MouseEvent.CLICK, delete_onClick);
invalidateDisplayList();
image.move(2,0);
}
}
override protected function createBorder():void {
// thought this might get rid of bottom border
}
public function delete_onClick(event:MouseEvent):void {
// do something
}
