ExtJS 4 : Adding a button to a tab panel header

Question

I am using ExtJS 4 and trying to add button on a tab panel header. Please have a look at this jsfiddle:

http://jsfiddle.net/ramarajuv/Sadnj/7/ . You can see it working fine with just the two tabs. Now, modify the same code by adding a tabBar as below:

Ext.create('Ext.panel.Panel',{
    renderTo : Ext.getBody(),
    id : 'testPanel',
    height : 200,
    width : 300,
    items: [{
        xtype : 'tabpanel',
        activeTab : 1,
        tabBar:[{
            dockedItems:[{ 
                xtype: 'button',
                text : 'Test Button'
            }]
        }],        
        items: [{     
            title: 'tab1'
        },{                  
            title: 'tab2'
        }]
     }]
});

No Javascript error is thrown, but the button that I want to see to the right of the tab panel header is not coming up. Could you please help how I can bring up a button on the tab panel?

score 8 · Accepted Answer · edited May 29 '15 at 05:55

8

If I understand your question it seems you want the button to be in the tabBar itself and not in its own toobar? If that's the case then you can use the following code available in this fiddle.

http://jsfiddle.net/Sadnj/15/

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    id: 'testPanel',
    height: 200,
    width: 200,
    items: [{
        xtype: 'tabpanel',
        activeTab: 1,
        tabBar: {
            items: [{
                xtype: 'tbfill'
            }, {
                xtype: 'button',
                text: 'Test Button'
            }]
        },
        items: [{
            title: 'tab1',
        }, {
        title: 'tab2',
        }]
    }]
});

edited May 29 '15 at 05:55

sparsh610

1,552
3
27
66

answered Aug 14 '13 at 12:12

bakamike

1,004
2
7
11

I actually got an answer in the meanwhile. However, thanks for helping me out. Accepted your answer. Also, is there a similar config option to add a Button on a regular Ext.panel.Panel header bar? Any example? – rajugaadu Aug 15 '13 at 15:08
instead of header:true, use header : { items:[...buttons here...] } – Dawesi Dec 06 '13 at 06:13
In ExtJS 5 at least you can also at the mini tools like gear, down, print, etc. You can add an item like this to the tabBar config: `{xtype: 'tool', type: 'down', handler:function(e, target, tabbar, tool){console.log('tool clicked', arguments)} }` – Christiaan Westerbeek Jul 23 '15 at 11:29

Behrad Farsi · Answer 2 · 2013-08-13T04:56:13.730

1

you can use this:

Ext.create('Ext.panel.Panel',{
    renderTo : Ext.getBody(),
    id : 'testPanel',
    height : 200,
    width : 200,
    items: [{
        xtype : 'tabpanel',
        activeTab : 1,
        tbar:[{
                text : 'txtButton'
        }],
        items: [{     
            title: 'tab1'
        },{                  
            title: 'tab2'
        }]
    }] 
});

this will make buttons for your tabpanel.

edited Aug 13 '13 at 04:56

answered Aug 13 '13 at 03:56

Behrad Farsi

1,110
13
25

Hey brad ... I tried what you suggested. Here is the update fiddle: http://jsfiddle.net/ramarajuv/Sadnj/8/. It is still not working. In fact, it is now rendering nothing ! I hope you got what I am trying to achieve here. A button on the same line as the tabs ... but to the right of the tab panel. – rajugaadu Aug 13 '13 at 04:03
Thanks Brad. Appreciate it. Got the answer in the meanwhile. – rajugaadu Aug 16 '13 at 03:19

score 0 · Answer 3 · answered Oct 29 '18 at 06:19

Add button to tabpanel header simply with this:

tabBar: {
            items: [
                { xtype: 'tbfill' },//fill the empty space between left and right
                {
                    xtype: 'button',
                    text: 'Button 1'
                }
            ]
        }

ExtJS 4 : Adding a button to a tab panel header

3 Answers3