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

Question

我有一个包含多个选项卡的选项卡面板。现在我想向标签栏添加一个带有操作的简单按钮。单击时它不应像其他选项卡那样打开选项卡，只需执行 javascript 函数即可。

这在 Extjs 中如何实现？

Answer 1

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

您还可以为每个选项卡指定不同的样式 header，具有不同类型的 header，并且可以轻松地以自定义颜色突出显示特定选项卡，如 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'
                    }]
                }]
            }]
        });
    }
});

示例 Fiddle : https://fiddle.sencha.com/#view/editor&fiddle/29r1

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

Extjs Modern Simple Button in Tab Panel Tab Bar

javascript

extjs

extjs6

extjs6-modern