Customize the behavior of a list.

[uncle]

Hi, I'm new to this forum and have searched some but cant find any answer to my question.

Is it posible to take a regular List or HorizontalList and change the behavior?

I need a list that if I remove one at the bottom the once above will fall down visually and have a small bounce.

Can I override the render process in some way or do I need to write it from scratch?

/Per-Erik

[drkstr]

Here is the API reference for the List control: http://livedocs.adobe.com/flex/2/langref/mx/controls/List.html

You can extend the List class to your own custom class and override some of the protected methods to create your own drawing effects. Post back if you are not sure where to go from there.

Best Regards,
...aaron

[uncle]

Thanks, I will look at it at once. :)

[uncle]

Hi again!

If you could give me a quick hint on where to look that would be great, cus I can find out where to instercept the redering process since I have to change the locations on the items.

Tnx
/Per-Erik

[drkstr]

Here are two functions in the List class you might find interesting. For more info, try opening up the List.as in your Flex source. It will give you a good idea of how to implement custom components.


/**
* @private
*/
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);

setRowCount(listItems.length);

if (bEditedItemPositionChanged)
{
bEditedItemPositionChanged = false;
commitEditedItemPosition(_proposedEditedItemPositi on);
_proposedEditedItemPosition = undefined;
}

drawRowBackgrounds();
}

/**
* @private
*/
override protected function drawRowBackgrounds():void
{
var rowBGs:Sprite = Sprite(listContent.getChildByName("rowBGs"));
if (!rowBGs)
{
rowBGs = new FlexSprite();
rowBGs.mouseEnabled = false;
rowBGs.name = "rowBGs";
listContent.addChildAt(rowBGs, 0)
}

var colors:Array;

colors = getStyle("alternatingItemColors");

if (!colors)
return;

StyleManager.getColorNames(colors);

var curRow:int = 0;
var i:int = 0;
var n:int = listItems.length;

while (curRow < n)
{
drawRowBackground(rowBGs, i++, rowInfo[curRow].y, rowInfo[curRow].height, colors[curRow % colors.length], curRow);
curRow++;
}

while (rowBGs.numChildren > n)
{
rowBGs.removeChildAt(rowBGs.numChildren - 1);
}
}


Best regards,
...aaron