4

タブの内容に特定の機能を実装する2つのボタンを持つ2つのタブと上部のツールバーを持つタブパネルがあります(ボタンは両方のタブに共通です)。これらのボタンをタブと同じパネル/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 に答える