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.
<?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:
<?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.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Nice tutorial but the thing i’m desperately trying to get at is how to determine the index of the item which has the mouse over it, lets say the mouse hoves over which item, that is the question.
Any suggesstions will be appreciated.
Regards,
Virk
Superb! Just what I was looking for :-)
Well, too late for ‘Shally Virk’, but someone else might find it useful:
Linkbar button active or not:
public function linkBar_itemClick(event:ItemClickEvent):void
{
var bar:LinkBar = event.target as LinkBar;
var len:uint = bar.numChildren;
for (var i:int = 0; i
Well, too late for Shally Virk, but someone else might need it:
ItemSelection active or not:
public function linkBar_itemClick(event:ItemClickEvent):void { var bar:LinkBar = event.target as LinkBar; var len:uint = bar.numChildren; for (var i:int = 0; i < len; i++) { Button(bar.getChildAt(i)).enabled = (i!=event.index); } }