在tabpanel中合併工具欄ExtJs 4

Question

我有一個帶有兩個選項卡和頂部的工具欄的選項卡面板，該選項卡上有兩個按鈕，用於在選項卡內容上實現某些功能（按鈕對兩個選項卡都是通用的）。有沒有辦法將這些按鈕放在與選項卡相同的面板/ div中，即選項卡的最右側，以便在ui上節省一些空間？ http://i.imgur.com/Flfpj.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" 
    } 
]);