View Full Version : Ext.tab.Panel Tools Configuration

29 Aug 2012, 1:17 PM

Let me preface this post by stating that it is entirely possible that I am 'doing it wrong'.

My goal is to create a tab panel with two tabs and display a help button to the right of the tabs (inline, in the same row). It should look something like this crude diagram.

________ ________ __________________
| tab 1 | tab 2 |______________[?]_|

I would normally accomplish this via the tools property on the definition of the Ext.panel.Panel. This is my first time working with an Ext.tab.Panel and it appears to behave differently from a basic panel with regard to how the tools are rendered. They appear in a header, above the tabs, and I am not sure why.

The 4.1 documentation states that the TabPanel will not display tools configured on the header.

TabPanels use their header (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Header) or footer (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-cfg-fbar) element (depending on the tabPosition (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Panel-cfg-tabPosition) configuration) to accommodate the tab selector buttons. This means that a TabPanel will not display any configured title, and will not display any configured header tools (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-cfg-tools).

When I add a configuration for the tools property to the Ext.tab.Panel, a header appears where I would not expect one to be, which causes the rendered component to appear as below.

//Difference in rendering behavior
|________ _______________________[?]_|
| tab 1 | tab 2 |__________________|

You can try this for yourself on any of the ExtJS 4.1 documentation pages by pasting the following into one of the code editor widgets and clicking on the Live Preview button.

Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,

tools : [{
type : 'help',
handler : function(event, toolEl, panel) {
alert('Should I be rendered up here?');
items: [{
title: 'Tab 1'
}, {
title: 'Tab 2'

By specifying the tools configuration on the Ext.tab.Panel, am I specifying a header configuration on this component? Is this a bug in 4.x or, if not, is the documentation incorrect? Am I simply misunderstanding proper usage of this component and the inheritance model (container > abstractpanel > panel > tabpanel)?

Does anyone know of a simple workaround to accomplish the stated goal?

Thanks in advance!

30 Aug 2012, 6:47 PM
You can add a button like this:

Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Foo'
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'

listeners: {
afterrender: function(panel){
var bar = panel.tabBar;
xtype: 'component',
flex: 1
xtype: 'button',
text: 'button'


30 Aug 2012, 7:30 PM
Have a look at my simple extension: Its.tab.plugin.Tool (http://www.sencha.com/forum/showthread.php?176963-Its.tab.plugin.Tool)