How do I add a button after the last item in a List in Flex?

Question

I have a HorizontalList in Flex that contains some data and an ItemRenderer representing a Page. After the last item (Page) in the list, I want to have a button - a Plus to create a new page.

What data can I look at to get the proper x,y position of the last ItemRenderer? I'm getting the position of

this.listContent.listItems[this.listContent.listItems.length-1];

which gives me the proper ItemRenderer instanceBut, but its x and y have been used for the index position of the ItemRenderer in the list. I want something in pixels relative to the list itself so I can position a button in UpdateDisplayList().

I'm interested in doing this via the UIComponent overrides instead of through the ItemRenderer itself because it doesn't seem like this is something that should live in the dataProvider... it would need to be some weird "lastItem" object that the ItemRenderer looked for and just seems odd. Plus, this is a fairly useful function for lists in general.

So, any ideas on this or other approaches?

Answer 1

It's hard to grab the actual itemRenderer for the last object because itemRenderer's are reused, so it's difficult to determine which one is always going to be the last. Checking for a "lastItem" variable in the data is probably the easiest way to implement this.

You could however, use the outerDocument property with an inline itemRenderer. This gives you access to the list.

<mx:List>
    <mx:itemRenderer>
        <mx:Component>
            <ns1:MyRenderer addLastButton="{outerDocument.myList.dataProvider.index == 10}"/>
        </mx:Component>
    </mx:itemRenderer>
...
</mx:List>

Answer 2

There's probably a right way of doing it using an itemEditor but I would try something like this:

1. Add an extra null object to the list every time the data refreshed.
2. Have an itemRenderer that overrides the set data as shown here which checks if the object is null and if it is, set a bindable boolean isAddable to true.
3. This boolean controls visibility and includeInLayout propertys of a textInput, label, and button.
4. Have the button dispatch an event when click which adds the new item to the list with some validation.

Answer 3

I think you can try to add one more item to dataProvider (with data e.g. "button") and create custom itemRenderer for the list which will change its appearance to Button (can be implemented with states) if data == "button"

Answer 4

On the list - add an event creationComplete - and inside its implementation - add another item to the list, say with certain string that will defer it from the previous items. In you item renderer tag add this attribute:

currentState="{data.sname == '%your string%' ? 'last' : 'normal'}"

And, off course, add the 2 states:

<s:states><br/>
        <mx:State name="normal"/>
        <mx:State name="last"/>
    </s:states> 

After that, you can manipulate your renderer, adjusting text labels according to states, e.g.:

<s:Label text.normal="{%whatever%}" text.last="this is the last item"/>

Hope it helps!