Merge toolbar in tabpanel ExtJs 4

button, extjs, tabs, toolbar

Solution

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

Problem

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" }] }] ```

Original source