Bug: the setVisible method does not works if invoked on the container

[dtex-lab]

Hi,

I'm using ExtJS 6.5

This simple fiddle illustrates which if I invoke the setVisible method on the container does not works (does not hides the tab)
The setDisabled invoked on the container works (disable the tab) and this is fine

Note that if I invoke the setVisible method on the tabs works, but in my real application I do not have and tabConfig,
so I have to invoke the setVisible method (just like the setDisabled which works) directly on the container



https://fiddle.sencha.com/#view/editor&fiddle/22mq

[evant]

The card layout uses visibility of the component to determine what is shown in the body of the layout, which is why those configs are not forwarded on. There's not necessarily a 1-1 mapping in the same way that disabled works.

As you've suggested, you should change the tabConfig if you want to hide a particular tab in the tab bar.

[dtex-lab]

Hi Evan,
this is not a good news for us.
The our application is a large application which has several tabpanel and allows customization made by our Partners (for example using JSP)

We have done a porting of our standard code from Ext 3.4 to Ext 6.5, and to adjust our standard code of sure is possible (even if is hudge for us)
But we do not have the control of the customized code of our Partners and so we will have to ask them to review their customization to adjust this behavior too.
Note which using ExtJS 3.4:

tabPanel.hideTabStripItem(aObject)

where aObject was to container to hide, works

Is really not possible for you to find out a work around?

Thanks in advance for your attention

[tjstuart]

You can do something like this ... untested though pulled from our own codebase where we had to implement hideTabStripItem for backwards compatibility with 2x. You may not need need all the code below as we do some other things in there. I'm sure you can work it out.

Ext.define('Test.overrides.tab.Panel', {
    override: 'Ext.tab.Panel',
    hideTabStripItem: function(item) {
        if (!this.rendered) {
            this.on('render', this.hideTabStripItem.bind(this, item), 
                this, {delay: 100, single: true});
            return;
        }
        if (!item.isComponent) {
            item = this.getComponent(item);
        }
        item.tab.hide();
        if (this.getActiveTab() === item) {
            item.hide();
            for (var i=0; i<this.items.getCount(); i++) {
                var it = this.items.get(i);
                if (!it.tab.hidden){
                    it.show();
                    break;
                }
            }
        }
    }
}); 

[evant]

What I was saying above is the hidden state of the component is used to determine whether that component is visible or not, so it can't be tied to the tab visible state for the card layout to function.

As the above post mentions, you can polyfill that method. For something fairly generic, I'd use something like:

Ext.define(null, {
    override: 'Ext.tab.Panel',
    showTabStripItem: function(item) {
        this.toggleTabStripItem(item, true);
    },

    hideTabStripItem: function(item) {
        this.toggleTabStripItem(item, false);
    },

    toggleTabStripItem: function(item, visible) {
        item = this.getComponent(item);
        var tab = item && item.tab;
        if (tab) {
            tab.setVisible(visible);
        }
    }
});

[dtex-lab]

Thanks everybody for your time.
The Evan's solution works perfectly, In the my opinion might be an improvement to the standard ExtJS framework