Place an 'addChild' button into grid space of TabNavigator

Question

This question is similar to the post:

"Move Button into grid space of a TabNavigator’s tabs in Flex Builder." http://stackoverflow.com/questions/1150835/move-button-into-grid-space-of-a-tabnavigators-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?

Answer 1

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>