Changing the mouse cursor when rolling over items in an MX List control in Flex

The following example shows how you can change the mouse cursor when rolling over an item in an MX List control in Flex by listening for the itemRollOver and itemRollOut events and using the CursorManager.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/01/changing-the-mouse-cursor-when-rolling-over-items-in-an-mx-list-control-in-flex/ -->
<mx:Application name="MX_List_itemRollOver_cursor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
 
            [Embed("assets/accept.png")]
            public static const accept:Class;
 
            [Embed("assets/anchor.png")]
            public static const anchor:Class;
 
            protected function list_itemRollOverHandler(evt:ListEvent):void {
                var dat:Object = evt.itemRenderer.data;
                if (dat.hasOwnProperty("curses")) {
                    cursorManager.setCursor(dat.curses);
                }
            }
 
            protected function list_itemRollOutHandler(evt:ListEvent):void {
                cursorManager.removeAllCursors();
            }
        ]]>
    </mx:Script>
 
    <mx:List id="list"
            width="200"
            itemRollOver="list_itemRollOverHandler(event);"
            itemRollOut="list_itemRollOutHandler(event);">
        <mx:dataProvider>
            <mx:ArrayCollection>
                <mx:Object label="Anchor cursor" curses="{anchor}" />
                <mx:Object label="default cursor" />
                <mx:Object label="Anchor cursor" curses="{anchor}" />
                <mx:Object label="Accept cursor" curses="{accept}" />
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:List>
 
</mx:Application>

Or, if you didn’t want to use data binding in the data provider, you could set a simple string to an embedded image, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/01/changing-the-mouse-cursor-when-rolling-over-items-in-an-mx-list-control-in-flex/ -->
<mx:Application name="MX_List_itemRollOver_cursor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import flash.utils.getDefinitionByName;
            import mx.events.ListEvent;
 
            [Embed("assets/accept.png")]
            public const accept:Class;
 
            [Embed("assets/anchor.png")]
            public const anchor:Class;
 
            protected function list_itemRollOverHandler(evt:ListEvent):void {
                var dat:Object = evt.itemRenderer.data;
                if (dat.hasOwnProperty("curses")) {
                    var cursorClass:Class = this[dat.curses] as Class;
                    cursorManager.setCursor(cursorClass);
                }
            }
 
            protected function list_itemRollOutHandler(evt:ListEvent):void{
                cursorManager.removeAllCursors();
            }
        ]]>
    </mx:Script>
 
    <mx:List id="list"
            itemRollOver="list_itemRollOverHandler(event);"
            itemRollOut="list_itemRollOutHandler(event);">
        <mx:dataProvider>
            <mx:ArrayCollection>
                <mx:Object label="Anchor cursor" curses="anchor" />
                <mx:Object label="default cursor" />
                <mx:Object label="Anchor cursor" curses="anchor" />
                <mx:Object label="Accept cursor" curses="accept" />
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:List>
 
</mx:Application>