10 Replies Latest reply on Sep 29, 2011 2:55 AM by Ram77

    TabNavigator tabIndexChange

    sahil1210
      Has anyone gotten the tabIndexChange event on TabNavigator to fire?
        • 1. Re: TabNavigator tabIndexChange
          AuroraCF
          Sahil,

          I am running into the same problem as you, no one respond to my post yet. Please let me know if you cn make it work.

          Thanks,

          AuroraCF
          • 2. Re: TabNavigator tabIndexChange
            superkatakam

            i have the same problem too

            how can one fire the tabindexchange event?

            • 3. Re: TabNavigator tabIndexChange
              John Hall Level 4

              Could you share a simplified repo of code so we can see which event you're trying to act upon?

              • 4. Re: TabNavigator tabIndexChange
                superkatakam Level 1

                <mx:Canvas>

                public function changeFunction(event:Event):void {

                     if(mainView.selectedIndex == 1 && x== 10)

                     {

                          Alert.show("Shouldnt Work");

                          mainView.selectedIndex = 0;

                     }

                }

                 

                .

                .

                .

                 

                <mx:TabNavigator change="changeFunction(event)" id="mainView" />

                .

                .

                .

                 

                </mx:Canvas>

                 

                Inside TabNavigator, i have

                 

                 

                public function pieChangeFunction(event:Event):void {

                     drillDown();

                }

                <mx:viewStack>

                <mx:PieChart id="pieChart" onClick="pieChangeFunction(event)"/>

                .

                .

                <mx:DataGrid.../>

                .

                </mx:viewStack>

                 

                 

                when i put up the change function for the tabnavigator and try to call it in a main application, that part is fine but the pie chart click event gets messed up. because there is a change event being triggered inside the tabnavigator.

                 

                I think i know that tabIndexChange event should work. But I cant even get the tabIndexChange to work.

                 

                Could you please suggest me an idea?

                • 5. Re: TabNavigator tabIndexChange
                  John Hall Level 4

                  Have you tried anything like the following?

                   

                   

                   

                   

                   

                  <?xml version="1.0" encoding="utf-8"?>

                       <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                          xmlns:s="library://ns.adobe.com/flex/spark"

                          xmlns:mx="library://ns.adobe.com/flex/mx"

                          minWidth="955"

                          minHeight="600">

                       <fx:Script>

                            <![CDATA[

                                 import mx.events.IndexChangedEvent;

                                 import mx.controls.Alert;

                   

                                 private function showMe( e : IndexChangedEvent ) : void {

                                      Alert.show( e.target.selectedIndex.toString());

                                 }

                            ]]>

                       </fx:Script>

                   

                       <mx:TabNavigator id="myTabNav"

                             x="116"

                             y="57"

                             width="200"

                             height="200"

                             change="showMe(event)">

                            <s:NavigatorContent label="Tab 1"

                                 width="100%"

                                 height="100%">

                            </s:NavigatorContent>

                                 <s:NavigatorContent label="Tab 2"

                                 width="100%"

                                 height="100%">

                            </s:NavigatorContent>

                                 <s:NavigatorContent label="Tab 3"

                                 width="100%"

                                 height="100%">

                            </s:NavigatorContent>

                       </mx:TabNavigator>

                  </s:Application>

                  • 6. Re: TabNavigator tabIndexChange
                    superkatakam Level 1

                    i just tried it. when i clicked on my pie chart.

                    this error popped up

                    TypeError: Error #1034: Type Coercion failed: cannot convert mx.charts.events::ChartItemEvent@69b7221 to mx.events.IndexChangedEvent.

                    • 7. Re: TabNavigator tabIndexChange
                      Flex harUI Adobe Employee

                      If the Chart is bubbling a change event, you may need to call

                      stopImmediatePropagation on it before it bubbles to the tab navigator

                      • 8. Re: TabNavigator tabIndexChange
                        superkatakam Level 1

                        then i believe i shoudl do it for all my components inside the tab.

                        i'll give that a shot.

                        • 9. Re: TabNavigator tabIndexChange
                          superkatakam Level 1

                          there is also something thats happeneing in addition to that.

                          everytime i click on the tab, the new tab, kinda looks blurred. when i remove the event, it looks fine. when i say blurr, it looks like an overlap of the same page over each other. only that the overlap is not exactly one above the other and i end up seeing 2 pages of the same kind one on top of the other.

                          is that an issue with as3?

                          • 10. Re: TabNavigator tabIndexChange
                            Ram77

                            <mx:Script>

                            <![CDATA[

                             

                            private function onTabIndexChange(e:IndexChangedEvent):void

                            {

                                                                         Alert.show(e.target.selectedIndex.toString());

                            }

                             

                            ]]>

                            </mx:Script>

                             

                            <mx:TabNavigator width="100%" height="100%" paddingTop="0" change="onTabIndexChange(event)">

                                                          <mx:VBox width="100%" height="100%" label="Tab 1" verticalAlign="top">

                              </mx:VBox>

                              <mx:VBox width="100%" height="100%" label="Tab 2" verticalAlign="top">

                              </mx:VBox>

                              <mx:VBox width="100%" height="100%" label="Tab 3" verticalAlign="top">

                              </mx:VBox>

                            </mx:TabNavigator>

                             

                            Hope this helps!!

                             

                            Ram