Question

我有一个Tab面板，里面有多个Tabs。现在我想在标签栏中添加一个带动作的简单按钮。点击它不应该像其他的那样打开Tab，只需执行一个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

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

1 个答案: