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?

Answer 1

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',
        }]
    }]
});