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

在tabpanel ExtJs 4中合并工具栏

1 个答案: