RE: [flexcoders] need help with a custom item renderer

[Alex Harui]

I'd start with mx.controls.listClasses.ListItemRenderer.  It can already
display an icon and text.  Copy the source and modify as needed.
Putting stuff at negative coordinates is generally not recommended.

 

________________________________

From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of ndele_sutton
Sent: Wednesday, July 23, 2008 7:35 PM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] need help with a custom item renderer

 

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
}