I’m able to hide items among the dockedItems of a TabPanel, but am wanting to temporarily hide the entire dock, because the toolbar itself still takes up space and the rest of the content does not fill the screen.
So far, I do like so:
myApp.views.productList.dockedItems.items[0].removeAll(true); myApp.views.productList.doComponentLayout();
Alternatively:
myApp.views.productList.getComponent('search').removeAll(true); myApp.views.productList.doComponentLayout();
But neither removes the dockedItems toolbar itself.
I’ve even tried to give the dockedItems individually and collectively an id:
to remove the whole component, but without luck. I’ve also tried moving the toolbar in question out from the docked items and into the items:
property of the containing panel, but this breaks other things in my app that I’d rather not change at present.
Any clues on how to do this?
Advertisement
Answer
If I understand you correctly you want to temporally remove tabBar from a tabPanel. I was able to accomplish this through giving and id to my tabBar and then using removeDocked and addDocked methods. I’m new to sencha-touch so most likely there is a better way of doing this
The code below removes tabBar from tabPanel and then adds it back again.
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() }
})