The following example shows you how you can set the selected index of a LinkBar control in Flex by setting the selectedIndex property using MXML or ActionScript.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/20/setting-the-selected-index-of-a-flex-linkbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Array id="arr">
<mx:Object label="One" />
<mx:Object label="Two" />
<mx:Object label="Three" />
<mx:Object label="Four" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="selectedIndex:">
<mx:HSlider id="slider"
minimum="0"
maximum="{linkBar.dataProvider.length - 1}"
liveDragging="true"
snapInterval="1"
tickInterval="1"
dataTipPrecision="0" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:LinkBar id="linkBar"
dataProvider="{arr}"
selectedIndex="{slider.value}" />
</mx:Application>
View source is enabled in the following example.
You can also set the selectedIndex property in ActionScript, as shown in the following snippet:
<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
private function slider_change(evt:SliderEvent):void {
linkBar.selectedIndex = evt.value;
}
]]>
</mx:Script>
{ 8 comments… read them below or add one }
There is a bug, try to click on the LinkBar’s items then use the slider : several items can be selected !
to be honnest, i fixed the problem by setting the ‘enabled’ property of each LinkButton to false, except the one that should be selected.
Hi,
the actionscript code is not working:
Could you pleas check that
Thanks
It seems that linkBar.selectedIndex = some_value is not supported if the linkbar is not paired with a viewstack, which is also the implicit dataprovider, thus the issue mentioned above.
It’s a bit of a pain…
True this will not work “linkBar.selectedIndex = some_value”. To do this make your own custom linkbar let say call it myLinkBar
==========================================================================
==========================================================================
And then in the itemClick (
itemClick="myFunc(event)") do the following:-private function myFunc(event:ItemClickEvent):void { mylinkbar.setIndex(event.index); }You can try this code:
This allows you to use the LinkBar without a viewstack when selecting an index…
Helps is I use the right tags… ;)
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:LinkBar xmlns:mx=”http://www.adobe.com/2006/mxml” itemClick=”myFunc(event)”>
<mx:Script>
<![CDATA[
import mx.events.ItemClickEvent;
import mx.controls.Button;
private function myFunc(event:ItemClickEvent):void
{
var n:int = this.numChildren;
for (var i:int = 0; i
</mx:Script>
</mx:LinkBar>
I’m trying to remove all spacing between linkbar link buttons, I have a design that calls for the links to be stacked vertically with 5px of space between them, I’ve cleared out all padding, for the linkbuttonstyles, and removed vertical gap, and set separator width to zero. What am I missing it seems like this shouldn’t be that hard? Any help is much appreciated thanks!