How to iterate through tabs in a flex panel
I am new to flex. I need to disable some tabs in a flexible tab specified by config. I am having problems iterating through tabs in a tab bar. If I use the getChildAt () command it doesn't disable the tab button but the content of that tab button, so it doesn't.
Thank you and cheers, Mohit Ranka
source to share
When asking about code, always post a minimal test case. getChildAt()
will work, so something happens to 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>
source to share
For anyone looking for a working answer for Flex 4.5 (Flex 4 perhaps). I finally figured out the solution. It looks like a hack to me, but Adobe doesn't answer the call and it works 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 call setTabEnabled(theTabIndex,trueFalse)
into an event handler related to what decides why the tab is enabled or not.
I have to expand the TabBar to support this, but I've already spent enough time trying to figure it out.
Happy coding = D
source to share