Flex Examples

The following example shows how you can determine which item was clicked in a LinkBar control in Flex by listening for the itemClick event.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/16/determining-which-item-was-clicked-in-a-flex-linkbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.ItemClickEvent;
            import mx.utils.ObjectUtil;

            private function linkBar_itemClick(evt:ItemClickEvent):void {
                Alert.show("index: " + evt.index + "n" +
                            "label: " + evt.label + "n" +
                            "item: " + "n" +
                            ObjectUtil.toString(evt.item),
                            evt.type);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="One" data="1" custom="cougar" />
        <mx:Object label="Two" data="2" custom="rhino" />
        <mx:Object label="Three" data="3" custom="elephant" />
        <mx:Object label="Four" data="4" custom="penguin" />
    </mx:Array>

    <mx:LinkBar id="linkBar"
            dataProvider="{arr}"
            itemClick="linkBar_itemClick(event);" />

</mx:Application>

View source is enabled in the following example.

Or, if you wanted to build the same example, but mainly using ActionScript, you could use the following code:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/16/determining-which-item-was-clicked-in-a-flex-linkbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.LinkBar;
            import mx.events.ItemClickEvent;
            import mx.utils.ObjectUtil;

            private var arr:Array;
            private var linkBar:LinkBar;

            private function init():void {
                arr = new Array();
                arr.push({label:"One", data:1, custom:"cougar"});
                arr.push({label:"Two", data:2, custom:"rhino"});
                arr.push({label:"Three", data:3, custom:"elephant"});
                arr.push({label:"Four", data:4, custom:"penguin"});

                linkBar = new LinkBar();
                linkBar.dataProvider = arr;
                linkBar.addEventListener(ItemClickEvent.ITEM_CLICK, linkBar_itemClick);
                addChild(linkBar);
            }

            private function linkBar_itemClick(evt:ItemClickEvent):void {
                Alert.show("index: " + evt.index + "n" +
                            "label: " + evt.label + "n" +
                            "item: " + "n" +
                            ObjectUtil.toString(evt.item),
                            evt.type);
            }
        ]]>
    </mx:Script>

</mx:Application>

View source is enabled in the following example.