Question

我正在使用sencha应用，我们有3个标签面板但是想要在标签栏中添加一个额外的按钮，而不是滑动到标签，只需覆盖第一个按钮顶部的面板{ {1}}。例如，如果您在第一个选项卡上并按下按钮，则覆盖面板将显示在顶部。如果您在第三个标签面板上，则会转到第一个tabpanel并覆盖按钮面板。

我可以显示按钮，但无法通过带有按钮的面板覆盖标签面板。

mainPanel中：

tabpanel

ShowButton ：

    Ext.define("MyApp.view.Main", {
    extend: 'Ext.Panel',
    requires: ['Ext.TitleBar', 'Ext.tab.Panel'],

    config: {
        fullscreen: true,
        id: 'viewMain',
        layout: 'vbox',
        items: [
            {
                xtype: 'topbar'
            },
            {
                xtype: 'tabpanel',
                tabBarPosition: 'bottom',
                flex: 1,
                id: 'mainTabs',
                cardSwitchAnimation: false,
                animation: false,
                ui: 'bottom',
                items: [
                    {
                        xtype: 'mappanel',
                        id: 'mapPanel'
                    },
                    {
                        xtype: 'showbutton'
                    },
                    {
                        xtype: 'searchpanel'
                    },
                    {
                        xtype: 'directionspanel'
                    },
                    {
                        xtype: 'rcpanel'
                    }
                ]
            }
        ]
            }
});

ShowController

    Ext.define("MyApp.view.ShowButton", {
    extend: 'Ext.Button',
    requires: ['Ext.Button'],
    xtype: 'showbutton',

    config: {
        title: 'Show',
        iconCls: 'locate4',
        id: 'showBtn',
        text: 'OK',
        id: 'showBtn',
        iconCls: 'locate4',
        iconMask: true,
        handler: function () {
            this.fireEvent('onShowBar', this);
        }
    }
});

表演酒吧：

    Ext.define('MyApp.controller.ShowController', {
    extend: 'MyApp.controller.BaseController',

    config: {
        refs: {
        },
        control: {
        }
    },

    //called when the Application is launched, remove if not needed
    launch: function(app) {

    },
    onShowBar: function () {
        var newShowBar = {
            xtype: 'showBar',
            docked: 'bottom'
        };
        this.add([newShowBar]);
    }
});

Answer 1

我建议使用停靠在容器底部的工具栏（布局：卡片），其中包含您的其他视图，而不是使用标签栏。如果向工具栏添加按钮并设置切换视图的动画，则工具栏的行为与标签栏类似。它还允许您添加一个显示叠加层的额外按钮。

如何使用sencha tabbar上的按钮放置覆盖面板

1 个答案: