View Full Version : Possibly stupid question... non-tab components in tabpanel?

28 Feb 2013, 8:03 PM
I honestly doubt this, but I have to ask... Is there a way to display other interactable components in the tab selection bar generated by a tabpanel? Architect is showing them as very reluctant to accept other types of components as children (and when it accepts, say, a 'tool', it puts it in the title header, not the tabs bar)

What i'm trying to do is 'dynamically' add such components, not add static things to the display (I have no doubt it's possible to make powerful but static changes by changing the way it renders... to have each tab have a subtitle under it's title for instance)

If you want an example of why I ask... On a toolbar I can have a button dynamically replaced with a text box (Hide the button, add a field which you can use to change the text of the button) Personally, i doubt this kind of behavior can be easily replicated on the TabPanel, but if it can it might look cooler than the Msg.Prompt I'm forcing myself to use at the moment

1 Mar 2013, 7:48 AM
What type of component? You just need a container type:

Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Foo'
}, {
xtype: 'grid',
title: 'My Grid',
border: false,
columns: [{header: 'World'}],
store: Ext.create('Ext.data.ArrayStore', {})

If you want other types, just create them in a container and create an xtype.


3 Mar 2013, 2:33 PM
:-? Hmm. I might be wrong here, but are you talking about components that appear AS another tab you can activate? (i.e. two tabs, one called ''Foo' and one called 'My Grid') That's what I got from your code, and unless I misunderstood what it does that's not what i am talking about.

I'm talking about having say, 'Foo', 'My Grid' and a Button called 'My Button' and/or a Text Field all allong the tab selection bar (neither of which open tabs). When i said 'interactable' I meant components that did something without selecting a tab.

Non-tab meaning is not a tab you can activate, and does not have a tab associated with it.

Sorry if i wasn't clear enough. :-|

3 Mar 2013, 3:35 PM
The section you're referring to is known as the TabBar:


Beneath all the fluff it's just a container with an hbox layout. You should be able to inject other components into it easily enough, though a bit of CSS juggling may be required to get them looking correct.

To grab hold of the TabBar either use a component query or grab it by property:


You'll probably need to do the manipulation post-render to ensure everything exists.

It wouldn't surprise me if Architect doesn't have any support for doing this.

3 Mar 2013, 10:03 PM
Thanks Skirtle, that looks like it will point me in the right direction.

A little more research from here, but good to know it is possible. I'll probably post whatever i code up here for future reference, in case anyone else searches for this.