CODEWITHSUNDEEP
extjsextjs4.2
rajugaadu
rajugaadu

Reputation: 714

ExtJS 4 : Adding a button to a tab panel header

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?

Upvotes: 4

Views: 13144

Answers (3)

Abhishek Bhardwaj
Abhishek Bhardwaj

Reputation: 300

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'
                }
            ]
        }

Upvotes: 0

bakamike
bakamike

Reputation: 1024

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

Upvotes: 8

Behrad Farsi
Behrad Farsi

Reputation: 1110

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.

Upvotes: 1

Related Questions