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.
{ 4 comments… read them below or add one }
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); } }