如何完全隱藏 dockedItems 工具欄

Question

我可以在 TabPanel 的停靠項中隱藏項目，但我想暫時隱藏整個停靠欄，因為工具欄本身仍然占用空間，並且內容的 rest 不會填滿屏幕。

到目前為止，我確實喜歡這樣：

myApp.views.productList.dockedItems.items[0].removeAll(true);
myApp.views.productList.doComponentLayout();

或者：

myApp.views.productList.getComponent('search').removeAll(true);
myApp.views.productList.doComponentLayout();

但兩者都不會刪除 dockedItems 工具欄本身。

我什至嘗試單獨和集體地給 dockedItems 一個id:以刪除整個組件，但沒有運氣。 我還嘗試將有問題的工具欄從停靠的項目中移出並移到包含面板的items:屬性中，但這會破壞我的應用程序中我目前不想更改的其他內容。

關於如何做到這一點的任何線索？

Answer 1

如果我理解正確，您想暫時從 tabPanel 中刪除 tabBar。 我能夠通過給我的 tabBar 和 id 來實現這一點，然后使用 removeDocked 和 addDocked 方法。 我是 sencha-touch 的新手，所以很可能有更好的方法來做到這一點

下面的代碼從 tabPanel 中刪除了 tabBar，然后再次將其添加回來。

Ext.setup({

onReady: function() {

    var tabpanel = new Ext.TabPanel({

        ui        : 'dark',
        sortable  : true,
        tabBar:{
            id: 'tabPanelTabBar'
        },
        items: [
            {title: 'Tab 1',html : '1',cls  : 'card1'},
            {title: 'Tab 2',html : '2',cls  : 'card2'},
            {title: 'Tab 3',html : '3',cls  : 'card3'}
        ]
    });

    var paneltest = new Ext.Panel({
        fullscreen: true,
        dockedItems:[
            {

                xtype: 'button',
                text: 'Disable TabBar',
                scope: this,
                hasDisabled: false,
                handler: function(btn) {

                    console.log(btn);
                    if (btn.hasDisabled) {

                        tabpanel.addDocked(Ext.getCmp('tabPanelTabBar'), 0);

                        btn.hasDisabled = false;
                        btn.setText('Disable TabBar');
                    } else {

                        tabpanel.removeDocked(Ext.getCmp('tabPanelTabBar'), false)

                        btn.hasDisabled = true;
                        btn.setText('Enable TabBar');
                    }
                }}
        ],
        items:[tabpanel]
    });
    paneltest.show()
}

})