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:

      var tp = component.getComponent('workTabBar') ;
      var btn = Ext.create('Ext.Button',{
            iconCls: 'search',
            ui: 'action',
            iconMask: true,
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:


.. 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:


Many thanks,

(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 )