Adding a delete button in the hovered state of a Spark List control item renderer in Flex 4

The following example shows how you can add a delete button to the hovered state of a Spark List control item renderer in Flex 4 by creating a custom item renderer and listening for the mouseDown event.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/09/adding-a-delete-button-in-the-hovered-state-of-a-spark-list-control-item-renderer-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_hovered_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <s:List id="lst"
            itemRenderer="skins.CustomItemRen"
            width="300"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="justify"
                    requestedRowCount="8" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="Application" />
                <fx:Object label="BorderContainer" />
                <fx:Object label="Button" />
                <fx:Object label="ButtonBar" />
                <fx:Object label="CheckBox" />
                <fx:Object label="ComboBox" />
                <fx:Object label="DataGroup" />
                <fx:Object label="DataRenderer" />
                <fx:Object label="DropDownList" />
                <fx:Object label="Group" />
                <fx:Object label="HGroup" />
                <fx:Object label="HScrollBar" />
                <fx:Object label="HSlider" />
                <fx:Object label="Label" />
                <fx:Object label="List" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

And the custom Spark List item renderer, skins/CustomItemRen.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/09/adding-a-delete-button-in-the-hovered-state-of-a-spark-list-control-item-renderer-in-flex-4/ -->
<s:ItemRenderer name="CustomItemRen"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx" 
        autoDrawBackground="true"
        minHeight="24">
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>
 
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.CloseEvent;
 
            import spark.components.List;
 
            protected function button1_clickHandler(evt:MouseEvent):void {
                Alert.show(data.label,
                        "Are you sure you want to delete this item?",
                        Alert.YES|Alert.CANCEL,
                        null,
                        alrt_closeHandler);
            }
 
            protected function alrt_closeHandler(evt:CloseEvent):void {
                switch (evt.detail) {
                    case Alert.YES:
                    case Alert.OK:
                        Object(owner).dataProvider.removeItemAt(itemIndex);
                        break;
                    case Alert.CANCEL:
                    case Alert.NO:
                        Object(owner).selectedIndex = -1;
                        break;
                    default:
                        break;
                }
            }
        ]]>
    </fx:Script>
 
    <s:HGroup width="100%" height="100%"
            verticalAlign="middle"
            paddingLeft="2" paddingRight="2"
            paddingTop="2" paddingBottom="2">
        <s:Label id="lbl" text="{data.label}" width="100%" />
        <s:Button id="btn"
                accentColor="red" emphasized="true"
                includeIn="hovered"
                width="12" height="12"
                mouseDown="button1_clickHandler(event);" />
    </s:HGroup>
 
</s:ItemRenderer>

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

6 thoughts on “Adding a delete button in the hovered state of a Spark List control item renderer in Flex 4

  1. thats cool… im lookin a way to use it inside a datagrid instead that a list…
    actually seems not working

  2. Peter,
    When an item is selected, its delete button doesn’t show up anymore. How can I disable the selected functionality to prevent this from happening?
    Thanks.

    1. @candy,

      You can probably just modify the code and include the button in the selected and hovered states by modifying the code to something like the following:

              <s:Button id="btn"
                      accentColor="red" emphasized="true"
                      includeIn="hovered,selected"
                      width="12" height="12"
                      mouseDown="button1_clickHandler(event);" />

      Peter

  3. Peter,
    I am embedding this List in a parent Component which is backed by a Presentation Model. Is there a way for me to access the parent’s PM when one of the delete button’s clicked?
    I reviewed your post on Renderer Function. Do I need to create a custom IFactory for that to happen?

Comments are closed.