R – Place an ‘addChild’ button into grid space of TabNavigator

actionscript-3flex3mxml

This question is similar to the post:

"Move Button into grid space of a TabNavigator’s tabs in Flex Builder."
Move Button into grid space of a TabNavigator's tabs in Flex Builder

but with a slight difference. I wish to have a button that adds a child (tab) to the TabNavigator in the grid space (simpler with TabBar, but see below), but will not block tabs as they extend towards the button. This functionality can be seen in every web browser that uses tabs.

In addition I would like to have a scroll button appear if too many tabs are opened, and the ability to close tabs. I have tried using Doug McCune's SuperTabNavigator, which offers most of these features, but it does not offer the addChild button that I am looking for.

Is there a way to add this 'addChild' button to the grid space, or to add the features from SuperTabNavigator to TabBar?

Best Answer

This class will do the trick except for scrolling when there are too many tabs. 

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="500" height="400">
    <mx:HBox width="100%">
        <mx:TabBar dataProvider="{viewstack}"/>
        <mx:Button label="+" width="35" click="addTab()"/>
    </mx:HBox>
    <mx:ViewStack height="100%" width="100%" id="viewstack"/>
    <mx:Script>
        <![CDATA[
            import mx.controls.Label;
            import mx.containers.Panel;
            //add a new container
            private function addTab():void
            {
                var l:Label = new Label();
                l.text = "Panel " + (viewstack.numChildren + 1);
                var p:Panel = new Panel();
                p.label = l.text;
                p.addChild(l);
                viewstack.addChild(p);
                viewstack.selectedChild = p;
            }
        ]]>
    </mx:Script>
</mx:VBox>
Related Topic