Javascript 如何完全隐藏dockedItems工具栏
我可以在TabPanel的dockedItems中隐藏项目,但我想暂时隐藏整个dock,因为工具栏本身仍然占用空间,其余内容不会填满屏幕 到目前为止,我确实喜欢这样:Javascript 如何完全隐藏dockedItems工具栏,javascript,sencha-touch,extjs,Javascript,Sencha Touch,Extjs,我可以在TabPanel的dockedItems中隐藏项目,但我想暂时隐藏整个dock,因为工具栏本身仍然占用空间,其余内容不会填满屏幕 到目前为止,我确实喜欢这样: myApp.views.productList.dockedItems.items[0].removeAll(true); myApp.views.productList.doComponentLayout(); 或者: myApp.views.productList.getComponent('search').removeA
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:
,以删除整个组件,但运气不佳。我还尝试将有问题的工具栏从停靠的项目中移出,并移动到包含面板的项目:
属性中,但这会破坏我应用程序中目前不想更改的其他内容
有没有关于如何执行此操作的线索?如果我理解正确,您希望临时从选项卡面板中删除选项卡栏。我能够通过给我的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()
}
})成功了!实际上,我的目的是删除没有tabBar设置的子Tabbanel的dockedItems,但这是有效的。正如您所示,我需要使用的方法是“removeDocked”。谢谢请注意,搜索Sencha Touch API文档不会返回此方法的任何内容。。。但在查看Ext.Panel文档时,它实际上已列出。