flex tabnavigator tabs click event

12.1k views Asked by At

I have a <mx:TabNavigator> which has some <s:NavigatorContent> tags as children . I want the tabs to dispatch an event when I click them . I tried the "click" event in NavigatorContent but it didn't do anything . anyone has any experience with it? thanks

3

There are 3 answers

2
Brian Genisio On

I believe you want the change event.

It is inherited from the ViewStack container: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/containers/ViewStack.html#event:change

1
jerome On

Hi i believe using the show event might do what you want?

i wanted an event triggered when the particular is shown, and i wanted a different action for each navigatorcontent of my tabnavigator.

hope it helps someone :)

1
mikelmo On
<mx:Module>
    <mx:TitleWindow id="tw" creationComplete="{init();}">
        <mx:Script>
            <![CDATA[
                import mx.controls.Button;
                import mx.events.FlexEvent;
                private function init():void {
                    for (var i:int=0; i<tabNav.getChildren().length; i++)  
                    {  
                        var tab:Button = tabNav.getTabAt(i);  
                        tab.addEventListener(FlexEvent.BUTTON_DOWN,tabClickHandler);  
                    }  
                }
                private function onClickTab(event:Event):void {
                    tw.title="onClickTab:"+event.target;
                }
                private function tabClickHandler(event:FlexEvent):void {
                    for (var i:int=0; i<tabNav.getChildren().length; i++)  
                    {  
                        if (event.target == tabNav.getTabAt(i)) {
                            var child:Object = tabNav.getChildAt(i);
                            child.dispatchEvent(new MouseEvent(MouseEvent.CLICK)); 
                            break;
                        }
                    }  
                }  
            ]]>
        </mx:Script>
        <mx:TabNavigator id="tabNav" width="200" height="200">
            <mx:VBox id="vbTab1" label="Tab 1" click="onClickTab(event)">
            </mx:VBox>
            <mx:VBox id="vbTab2" label="Tab 2" click="onClickTab(event)">
            </mx:VBox>
        </mx:TabNavigator>
    </mx:TitleWindow>
</mx:Module>