Question

我能够在TabPanel的dockedItems中隐藏项目，但我想暂时隐藏整个停靠栏，因为工具栏本身仍占用空间而其余内容不会填满整个屏幕。 / p>

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

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

}）

如何完全隐藏dockedItems工具栏

1 个答案: