Question

I have a tab panel with two tabs and a toolbar at the top that has two buttons that implement certain functionality on the contents of the tabs(the buttons are common to both tabs). Is there a way to place those buttons in the same panel/div as the tabs ie to the extreme right of the tabs, so as to save some real estate on the ui?
https://i.stack.imgur.com/OiLgg.png

title: 'Results',
layout: { type: 'fit', align: 'stretch' },
dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    items: [{
                xtype: 'tbfill' // fills left side of tbar and pushes following items to be aligned to right
            },
            {
                xtype: 'label',
                text: 'Export to: '
            },
            {
                xtype: 'button',
                text: 'Excel',
                iconCls: 'icon-excel'
            },
            {
                xtype:'button',
                text:'PDF',
                iconCls:'icon-pdf'
            }],
    style: { padding: '8px' }
}],
 items:
    [{
    xtype: 'tabpanel',
    id: 'results-tabpanel',
    activeTab: 0,
    border: false,
    items: [{
        title: 'Results',
        id: 'result-tab',
        layout: { type: 'fit', align: 'stretch' },
        html: "Run a query to see results"
    },
        {
            title: 'Transactions',
            id: 'transactions-tab',
            layout: { type: 'fit', align: 'stretch' },
            html: "Run a query to see transactions"
        }]
}]

Answer 1

Try this:

var tabPanel = Ext.getCmp("results-tabpanel");
tabPanel.tabBar.addTool([
    {xtype: "tbfill"},
    {
        xtype: "label",
        text:  "Export to: "
    },
    {
        xtype: "button",
        text:  "Excel",
        iconCls: "icon-excel"
    },
    {
        xtype: "button",
        text:  "PDF",
        iconCls: "icon-pdf"
    }
]);