Spark List with Buttons

问题:

I have a Spark List with a data provider consisting of a list of filled out form applications. What is the best way to add a button to each List Item (form application)? This button will be named Open and will navigate to the specified form application.

Thanks in advance for any advice!

回答1:

This is similar to what @www.Flextras.com said, so I'm not going to repeat that. However, I'll add an example and one or two things.

Your custom ItemRenderer might look like this:

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;

            private function requestForm():void {
                var event:ItemClickEvent = new ItemClickEvent(ItemClickEvent.ITEM_CLICK);
                event.index = itemIndex;
                event.item = data;
                owner.dispatchEvent(event);
            }
        ]]>
    </fx:Script>

    <s:Label id="labelDisplay" verticalCenter="0" />
    <s:Button right="0" label="open" verticalCenter="0" click="requestForm()" />

</s:ItemRenderer>

Two things that differ from Flextras' answer:

• I use the built-in ItemClickEvent instead of a custom event > less coding
• I dispatch the event on the owner of the ItemRenderer, which is in fact the List that contains this ItemRenderer. Because of this, you don't need to bubble the Event.

Now to open the form when the Button is clicked, do something like this:

myList.addEventListener(ItemClickEvent.ITEM_CLICK, openForm);

private function openForm(event:ItemClickEvent):void {
    trace("open " + event.item.toString());
}

回答2:

Use a custom itemRenderer which displays the button along w/ your itemRenderer data (form application).

When the button is clicked; dispatch a custom event which bubbles. You may have to include some identifier for the form application this button click represents.

Listen to the event on the list class using the addEventListener() method. You can't use MXML since you'll be using a custom event undefined in the List's default metadata.

In your listener, perform the relevant UI changes to display your form application.