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

Question

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

这在 Extjs 中怎么可能？

Answer 1

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

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

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