4

我有一个带有两个选项卡的选项卡面板和一个顶部的工具栏,该工具栏有两个按钮,用于在选项卡的内容上实现某些功能(这些按钮对两个选项卡都是通用的)。有没有办法将这些按钮放置在与选项卡相同的面板/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"
        }]
}]
4

1 回答 1

4

试试这个:

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"
    }
]);
于 2012-04-13T17:46:13.077 回答