如何完全隐藏 dockedItems 工具栏

Question

我可以在 TabPanel 的停靠项中隐藏项目，但我想暂时隐藏整个停靠栏，因为工具栏本身仍然占用空间并且其余内容不会填满屏幕。

到目前为止，我确实喜欢这样：

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

})