button - 标签面板 ExtJs 4 中的合并工具栏

Question

我有一个选项卡面板，其中有两个选项卡和顶部的工具栏，该工具栏有两个按钮，用于在选项卡内容上实现某些功能(这些按钮对于两个选项卡都是通用的)。有没有办法将这些按钮放置在与选项卡相同的面板/div 中，即选项卡的最右侧，以便在用户界面上节省一些空间？ /image/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

试试这个:

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