How to iterate over tabs in flex tabbar
-
05-07-2019 - |
Question
I am a flex newbie. I need to disable some of the tabs in a flex tabbar specified, by configuration. I am having trouble in iterating over the tabs in the tab bar. If i use getChildAt() command, it does not disable the tab button, but the content of that tab button, so its no good.
Thanks and regards, Mohit Ranka
Solution
When asking about code, always post a minimal test case. getChildAt()
will work, so there's something else going on with your code.
<mx:Script>
<![CDATA[
import mx.events.ItemClickEvent;
import mx.controls.tabBarClasses.Tab;
private function clickTab(event:ItemClickEvent):void {
var target:TabBar = event.currentTarget as TabBar;
var currTab:Tab;
var parity:int = event.index & 1;
/* disable all tabs at indices w/ same parity as clicked tab;
enable tabs of opposite parity.
*/
for (var i=0; i<target.numChildren; ++i) {
currTab = target.getChildAt(i) as Tab;
currTab.enabled = (i&1)^parity;
}
}
]]>
</mx:Script>
<mx:TabBar id="someTabs" itemClick="clickTab(event)">
<mx:dataProvider>
<mx:String>Foo</mx:String>
<mx:String>Bar</mx:String>
<mx:String>Baz</mx:String>
<mx:String>Bam</mx:String>
</mx:dataProvider>
</mx:TabBar>
OTHER TIPS
why not use a bindable to your configuration?
something like
enabled="{yourConfiguration.lastResult.enabled}"
For those who want an working answer for Flex 4.5 (probably Flex 4 also). I finally figured out a solution. It feels like a hack to me, but Adobe's not answering the call and it's working for me. Here's a simplified example.
<!-- component that has the the TabBar in it... -->
<fx:Script>
<![CDATA[
//imports here
import mx.core.UIComponent;
//imports
private function setTabEnabled(index:int,enabled:Boolean):void{
var theTab:UIComponent = theTabBar.dataGroup.getElementAt(index) as UIComponent;
if(theTab){theTab.enabled = enabled;}
}
]]>
</fx:Script>
<s:TabBar id="theTabBar"
dataProvider="{viewStack}"/>
<mx:ViewStack id="viewStack">
<s:NavigatorContent label="0th Tab">
<!-- ...Content -->
</s:NavigatorContent>
<s:NavigatorContent label="1st Tab">
<!-- ...Content -->
</s:NavigatorContent>
<s:NavigatorContent label="2nd Tab">
<!-- ...Content -->
</s:NavigatorContent>
</mx:ViewStack>
<!-- rest of the component that has the the TabBar in it... -->
Then you just call setTabEnabled(theTabIndex,trueFalse)
in an event handler related to whatever decides why the tab is, or isn't, enabled.
I should extend the TabBar to support this, but I've already spent enough time trying to figure it out.
Happy Coding =D