PDA

View Full Version : Add Button to Horizontally-Scrollable Tab Bar



displaced
16 Nov 2012, 4:33 AM
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:


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:

40111

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

40112

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

mitchellsimoens
19 Nov 2012, 6:50 AM
Every time I have seen someone get more advanced with the tab panel and try to have extra components in the tab bar they always come up with issues and memory leaks. Tab bar doesn't like to have extra items so I always suggest to just use a container with card layout and use a toolbar and then handle the switching yourself.