How do you combine renderers in flex?

Question

I am trying to make a generic list control that has x buttons in it so that users can remove items from the list by clicking the x button. However, this list control needs to support item renderers while still standardizing the layout of items placed next to x buttons.

So I figure the best approach would be to extend the list control and use a renderer that draws the x button and combines that with what ever renderer the user supplies. Unfortunately I cannot figure out how to do that.

I tried overriding newInstance method from the IFactory interface and used that to create an HBox that contains my button and inserts the newInstance result from a user supplied renderer, however it wasn't complete. It displayed as I expected, but the mouse over effect only worked on the user supplied renderer portion and not the entire HBox that my custom renderer made.

There seems to be a lot of missing details in the Flex documentation on this subject.

I am making all of this in Action Script 3.

Answer 1

I found the easiest solution was to just use a data grid and an item renderer for the last column. I extended the advanced data grid to make a "EditabledList" class, and I modified the "public function set columns" method to automatically add my remove button column to the end. Then I made a remove button item renderer for that column. Binding the click action was a little tricky since I only had a reference to the data for that row and not a reference to the list. I got around that by overriding the "public set dataProvider" method to replace each items in the list with my own custom object that has the reference to the list, a unique id, and a "removeMe" method. I called this object an EditableListItem. The unfortunate side effect is that data binds must be prefixed with an extra ".data" since the user's objects are stored in the "data" property of my EditableListItem's.

This is what my renderer looks like.

<fx:Component className="buttonRenderer">
    <s:MXAdvancedDataGridItemRenderer height="100%" width="100%">
        <s:Button left="5" top="5" skinClass="{buttonSkin}" click="EditableList.clickButton(data)"
            useHandCursor="true" buttonMode="true" toolTip="Remove item"/>
    </s:MXAdvancedDataGridItemRenderer>
</fx:Component>

The buttonSkin just rendered a custom image with roll over effects.