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

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 ?

Code:

---

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:

Code:

---

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

this is a wrong reference to controller:

Code:

---

Ext.ComponentQuery.query('#myEditController')

---

any different way to access?

thx

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

Code:

---

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? :(

there is a way to show/hide:

Code:

---

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

on extjs3 it was tabpanel.doLayout(true);

Is there any similar for 4.1?

on IE8 this will reproduce any time you like:

Code:

---

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

---

thx