5 Replies Latest reply on May 10, 2010 7:49 AM by wwwcad

    Tab Navigator last selected item issue


      I am using flex 4 and having issue with the tab navigator


      Steps to reproduce:
      1. Load the application given below. Select Tab 1 from tab  navigator
      2. It will show you  "I am in tab 1"
      3. Now click on remove tab link which is at the upper right corner.
      4. Click on "Add tabs" which at the left upper corner.
      5. Now you will see the focus is on "Tab 1" but the content related to  Tab 0 : which is "I am in Tab 0"

        Actual Results:
        Only focus  remains on the last selected tab but the actual contents  are of first child.
        Expected Results:
        By default the focus should be on first tab.


      My code :


      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="1024" minHeight="768">
                  import mx.controls.Alert;
                  import mx.events.FlexEvent;
                  import spark.components.Button;
                  import spark.components.Label;
                  import spark.components.NavigatorContent;
                  private function addTabs(event:FlexEvent):void{
                      for(var i:int=0; i<2; i++){
                          var labelText:String = "Tab "+i;
                          var content:NavigatorContent = new NavigatorContent();
                          content.label = labelText;                   
                          var label:Label = new Label();
                          label.text = "I am in "+labelText;
                  private function add_clickHandler(event:MouseEvent):void{
                  protected function remove_clickHandler(event:MouseEvent):void{               
          <mx:Canvas id="testCanvas"
                     width="100%" height="100%"
                     backgroundColor="#CDEFFC" creationComplete="addTabs(event)">
                  label="Add Tabs"
                  left="60" top="10"
                  color="#004B8D" fontWeight="normal" textAlign="right" click="add_clickHandler(event)"/>
                  label="Remove Tabs"
                  right="10" top="10"
                  color="#004B8D" fontWeight="normal" textAlign="right" click="remove_clickHandler(event)"/>
                  paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"
                  left="0" top="40" right="0" bottom="0"


      Please let me know how to get rid it.



        • 1. Re: Tab Navigator last selected item issue

          Same problem here one hour ago, did you solve it already?

          I'm trying updating the properties selectedindex and tabindex but it's no working.

          • 2. Re: Tab Navigator last selected item issue
            wwwcad Level 1

            There is an unsolved bug in adobe.


            You have to solve it manually overriding the function:


                 import mx.containers.TabNavigator;
                 public class TabNavigatorFixed extends TabNavigator
                     public function TabNavigatorFixed()
                     override protected function  commitSelectedIndex(newIndex:int):void
                         if(tabBar.numChildren > 0){
                             // Select the corresponding Tab in the Tab Bar (this  fixes a bug in Flex)
                             tabBar.selectedIndex = newIndex;

            • 3. Re: Tab Navigator last selected item issue
              wwwcad Level 1

              Ok, i apply a better solution, dispatch a click:

                                  mainTabNavigator.getTabAt(mainTabNavigator.selectedIndex).dispatchEvent(new MouseEvent(MouseEvent.CLICK,true,false));






              • 4. Re: Tab Navigator last selected item issue
                sandeep07 Level 1

                Hey Thank you very much for the solution...It works fine.


                First I added that code just after add tab event

                But I was getting following error on applcaition load.

                " RangeError: Error #2006: The supplied index is out of bounds.
                    at flash.display::DisplayObjectContainer/getChildAt() ..... "


                So kept this code on remove tabs event just before removing the children and modified "mainTabNavigator.selectedIndex to point at first item.


                mainTabNavigator.getTabAt(0).dispatchEvent(new MouseEvent(MouseEvent.CLICK,true,false));


                This is good workaround but it would be helpful if adobe fix these kind of issues.

                Thanks for help,


                • 5. Re: Tab Navigator last selected item issue
                  wwwcad Level 1

                  Well, this solution didn't work with the Flex Lib SuperTabNavigator.


                  But here is a better solution, i think it will work with your code too.


                  mainTabNavigator.dispatchEvent(new IndexChangedEvent(IndexChangedEvent.CHANGE,true,false));