1

私はsenchaアプリで作業しており、3 つのタブ パネルがありますが、タブ バーに追加のボタンを追加して、タブにスライドする代わりに、最初のボタンの上にパネルを重ねるだけですtabpanel。たとえば、最初のタブでボタンを押すと、オーバーレイ パネルが上に表示されます。3 番目のタブ パネルにいる場合は、最初のタブ パネルに戻りtabpanel、ボタン パネルをオーバーレイします。

ボタンを表示することはできますが、タブパネルをボタンのあるパネルに重ねるだけではできません。

メインパネル:

    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'
                    }
                ]
            }
        ]
            }
});

表示ボタン:

    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);
        }
    }
});

ShowController

    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]);
    }
});

表示バー:

    Ext.define("MyApp.view.ShowBar", {
    extend: 'Ext.Panel',
    xtype: 'showbar',

    config: {
        iconCls: 'locate4',
        docked: 'bottom',
        modal: false,
        style: 'opacity:0.8',
                items: [
                                    {
                                        iconCls: 'home',
                                        iconMask: true,
                                        poiGroup: 'accomm'
                                    },
                                    {
                                        iconCls: 'star',
                                        iconMask: true,
                                        poiGroup: 'attractions'
                                    }/*,
                                    {
                                        iconCls: 'hotoffer',
                                        iconMask: true,
                                        poiGroup: 'membersavings'
                                    }*/
                                ]

    }
});
4

1 に答える 1

0

タブバーを使用する代わりに、他のビューを含むコンテナー (レイアウト: カード) の下部にドッキングされたツールバーを使用することをお勧めします。ツールバーにボタンを追加し、ビューを切り替えるアニメーションを設定すると、ツールバーはタブバーと同じように動作します。また、オーバーレイを表示するボタンを追加することもできます。

于 2012-10-21T22:53:10.737 に答える