选项卡面板选项卡栏中的 Extjs 现代简单按钮答案

【问题标题】：Extjs Modern Simple Button in Tab Panel Tab Bar选项卡面板选项卡栏中的 Extjs 现代简单按钮
【发布时间】：2018-04-28 20:32:15
【问题描述】：

我有一个标签面板，里面有多个标签。现在我想向标签栏添加一个带有操作的简单按钮。当点击它时，它不应该像其他标签一样打开一个标签，只需执行一个 javascript 函数。

这在 Extjs 中怎么可能？

【问题讨论】：

标签： javascript extjs extjs6 extjs6-modern

【解决方案1】：

是的，这是可能的。您可以使用 tabBar 配置来实现。您将需要添加 setActive 方法并需要处理事件以更改选项卡。

您还可以为每个选项卡标题指定不同的样式，具有不同类型的标题，并且可以轻松地以自定义颜色突出显示特定选项卡，如 fiddle 所示。

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.Viewport.add({
            xtype: 'panel',
            layout: 'fit',
            title: 'Tab Panel with custom button',
            items: [{
                xtype: 'tabpanel',
                id: 'tabPanel',
                tabBar: {
                    items: [{
                        xtype: 'button',
                        text: 'Batman',
                        ui: 'action',
                        setActive: function (active) {
                            this.setPressed(active);
                        },
                        handler: function () {
                            var tabPanel = Ext.getCmp('tabPanel');
                            tabPanel.setActiveItem(0);
                        }
                    }, {
                        xtype: 'button',
                        text: 'Goku',
                        ui: 'action',
                        setActive: function (active) {
                            this.setPressed(active);
                        },
                        handler: function () {
                            var tabPanel = Ext.getCmp('tabPanel');
                            tabPanel.setActiveItem(1);
                        }
                    }, {
                        xtype: 'spacer',
                        setActive: function () {}
                    }, {
                        xtype: 'button',
                        text: 'Custom button',
                        ui: 'decline',
                        setActive: function () {},
                        handler: function () {
                            Ext.Msg.alert('Custom Message', 'This way you can do custom js function execution on tab bar');
                        }
                    }]
                },
                items: [{
                    items: [{
                        html: 'Batman is cool'
                    }]
                }, {
                    items: [{
                        html: 'Goku can defeat superman'
                    }]
                }]
            }]
        });
    }
});

小提琴示例： https://fiddle.sencha.com/#view/editor&fiddle/29r1

【讨论】：