Hi,

I've got a TabPanel with a top-docked tab panel. The tab bar has a standard button added to the left of the tab buttons using the following code:

Code:
      var tp = component.getComponent('workTabBar') ;
      var btn = Ext.create('Ext.Button',{
            width:50,
            height:30,
            iconCls: 'search',
            ui: 'action',
            iconMask: true,
            style:'position:absolute;top:7px;bottom:auto;left:5px;z-index:0;'
        });
        tp.element.insertFirst(btn.element);
However, I now need to add extra tabs to the panel. I've set the TabPanel to be horizontally-scrollable, which works fine. However, since the scrollable area is below the added button, the tab buttons scroll behind the added button.

I've played with the added button's z-index without any luck. Can anyone suggest a way to implement this?

For reference, here's what it currently looks like:

tabbar-bad.jpg

.. and here's an approximation of what I'd like (essentially the scrollable container's left edge should shift to the right of the 'search' button:

tabbar-good.jpg

Many thanks,
Chris


(PS - I'm pretty amazed at Sencha Touch. I've been a WinForms developer for years whose attempts at moving to the JavaScript-y world of web development has always fizzled out. Sencha's MVC structure, clean controls and excellent functionality has finally made everything click! (Well, not everything, otherwise I wouldn't be here asking for help )