The following example shows how you can enable and disable individual tabs in a TabBar control by setting the enabled property in the ViewStack container’s child containers.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/25/enabling-and-disabling-specific-tabs-in-a-tabbar-control/ -->
<mx:Application name="TabBar_enabled_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="tabBarEnabled"
                label="TabBar.enabled"
                selected="true"
                width="25%" />
 
        <mx:CheckBox id="tab1Enabled"
                label="Tab1.enabled"
                selected="true"
                width="25%" />
 
        <mx:CheckBox id="tab2Enabled"
                label="Tab2.enabled"
                selected="true"
                width="25%" />
 
        <mx:CheckBox id="tab3Enabled"
                label="Tab3.enabled"
                selected="true"
                width="25%" />
    </mx:ApplicationControlBar>
 
    <mx:VBox verticalGap="0">
        <mx:TabBar id="tabBar"
                width="400"
                dataProvider="{viewStack}"
                enabled="{tabBarEnabled.selected}" />
 
        <mx:ViewStack id="viewStack" width="400" height="100">
            <mx:VBox id="tab1"
                    label="Tab1"
                    backgroundColor="haloGreen"
                    enabled="{tab1Enabled.selected}">
                <mx:Label text="Label 1" />
            </mx:VBox>
 
            <mx:VBox id="tab2"
                    label="Tab2"
                    backgroundColor="haloBlue"
                    enabled="{tab2Enabled.selected}">
                <mx:Label text="Label 2" />
            </mx:VBox>
 
            <mx:VBox id="tab3"
                    label="Tab3"
                    backgroundColor="haloOrange"
                    enabled="{tab3Enabled.selected}">
                <mx:Label text="Label 3" />
            </mx:VBox>
        </mx:ViewStack>
    </mx:VBox>
 
</mx:Application>

View source is enabled in the following example.

 
Tagged with:
 
About The Author

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.

5 Responses to Enabling and disabling specific tabs in a TabBar control

  1. Tushar says:

    Hi,
    Thank you for help

  2. tharun says:

    hi, toolbars are dockable but tabs also possible to dock ? can you provide some example ?

  3. Steve Lombardi says:

    This no longer works with a spark tab bar. Now to be able to use a viewstack with spark components, IO need to use “navigator content” components. Setting these to disabled does not make the linked tab disable. So how do I make a tab disabled in this case>

  4. Brij kishor says:

    Nice sample code but above sample code is not working for flex mobile project.How to create this functionality by Spark component.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree