TabPanel, how to hide a tab? I need to restore later on.

[zlevardy]

hi,

I am having a tab what does not need to show unrelated users. I have not found a way to simply hide it. That's why needed to be removed. But then I am facing to an issue to restore it, with a selection event. This part is not working.

Is this possible to hide?

If not, what the problem with my event restore ?

restoreOthersTab: function() {
	var othersTab = {
          xtype: 'editOthersList',
          itemId: 'editOthersTabPanel',
          title: 'Others'
      };
	Ext.ComponentQuery.query('#editTabPanel')[0].add(othersTab);
	
	//also restore select event:
	Ext.ComponentQuery.query('#myEditController')[0].control({
      'editOthersList': { selectionchange: Ext.ComponentQuery.query('#myEditController')[0].onOthersEditSelect }
  });
},


hideOthersTab: function() {
	if (Ext.ComponentQuery.query('#editOthersTabPanel')[0]!=undefined) {	
		Ext.ComponentQuery.query('#editTabPanel')[0].remove(1);
	}
}

the event listener made on controller creation:

Ext.define('MyApp.controller.Edit', {
	extend: 'Ext.app.Controller',
	
	itemId: 'myEditController',
	
	stores: [...],
	models: [...],
	views: [...],
	
	init: function() {
		this.getEditOthersStore().load();
		
		this.control({
	        'editMyList': { selectionchange: this.onMyEditSelect },
	        'editOthersList': { selectionchange: this.onOthersEditSelect }
	    });


		
	},
	
	onMyEditSelect: function(selModel, selection) {
		...
	},
		
	onOthersEditSelect: function(selModel, selection) {
	...
	},
...
}

thx,
Zol

[zlevardy]

this is a wrong reference to controller:

Ext.ComponentQuery.query('#myEditController')

any different way to access?

thx

[zlevardy]

i have expected this to hide a tab on tabPanel, but do nothing:

Ext.ComponentQuery.query('#editMyTabPanel')[0].hide()

there is another topic, where suggested to set title '', but the tab remains clickable, and confusing as shown.

No hints?

[zlevardy]

there is a way to show/hide:

Ext.ComponentQuery.query('#editTabPanel')[0].getComponent(1).tab.hide();

The only pain comes with IE8: I do hide it, when tabpanel is not visible, then earlier tab outline shown (empty) until mouse hover over on it.

Any hint refreshing tabpanel somehow, or the tab itself?

thx

[zlevardy]

on extjs3 it was tabpanel.doLayout(true);

Is there any similar for 4.1?

on IE8 this will reproduce any time you like:

tabpanel.getComponent(1).tab.show();
tabpanel.setVisible(false);
tabpanel.getComponent(1).tab.hide();
//doLayout(true) like refresh needs here
tabpanel.setVisible(true);

thx