Unable to conditional hide tab by binding to data property in Ext.js 6

Question

I have a tabpanel where I'm capturing a shopping cart on tab one, payment information on tab two, and showing a summary on tab three.

I would like to hide tab two if the shopping cart total is 0.

The problem I'm running into is that when I try to bind to a formula that determines a boolean value for hiding the tab, the tab does not hide.

Here's a poc:

Ext.define('TestPanel',{
    extend: 'Ext.tab.Panel',
    xtype: 'testpanel',
    title: 'Test Panel',
    viewModel:{
      data:{
          cartTotal: 0
      },
      formulas:{
          hideTabTwo: function(get){
              return get('cartTotal') == 0 ? true : false
          }
      }
    },

    items:[
        {
            title: 'Tab 1',
            items:[
                {
                  xtype: 'textfield',
                  bind:{
                      value: '{cartTotal}'
                  }
                },
                {
                    bind:{html:'Cart Total: {cartTotal}'}
                },
                {
                    bind:{
                        html: 'Hide Tab 2: {hideTabTwo}'                
                    }
                }
              ]
        },
        {
            title: 'Tab 2',
            html: 'omg',
            bind:{
                hidden: '{hideTabTwo}'
            }
        },
        {
            title: 'Tab 3',
            html: 'lol'
        }
    ]
})

Ext.application({
    name : 'Fiddle',




    launch : function() {
        Ext.create('TestPanel',{
            renderTo: Ext.getBody()
        })
    }
});

I can't see what's going wrong here. If you look at the output of the line html: 'Hide Tab 2: {hideTabTwo}' in the fiddle, you'll see that it is toggling between true and false.

Any ideas?

Answer 1

I posted this same question to Sencha's forums and a user pointed out the correct answer.

The difference between my code and his code was that the binding to the hidden property for the second tab needed to be included in a tabConfig property for the tab:

    {
        title: 'Tab 2',
        html: 'omg',
        tabConfig:{
            bind:{
                hidden: '{hideTabTwo}'
            }
        }
    }

After seeing his solution I went back to the docs on Ext.tab.Panel it's noted under the section controlling tabs.

I was looking in the wrong place (it also didn't help that tabConfig isn't mentioned in the Ext.tab.Tab's documentation :/ ).

Answer 2

Yes, I have an idea. To verify it, I added to your fiddle in Tab 1:

            {
              xtype: 'textfield',
              bind:{
                  hidden: '{hideTabTwo}'
              }
            },

The result was devastating: The bind works correctly with textfield, but not with tab.

Why is that?

I remember that there's an issue that has been prevailing in ExtJS since at least 4.2.1, and it's not about bind, but about tabs. In my own code, which does not use bind at all, I have written something like this:

items.each(function(item) {
    var hideItem = ...
    item.setHidden(hideItem);
    if(item.tab) item.tab.setHidden(hideItem); // hide tab!
});

I remember that I filed this as a bug in Sencha forum in early 2014.

Please file a bug report in Sencha forum as well, so as to increase the priority on the existing ticket(s). Keep in mind that they didn't fix the issue in two years, so do not expect a quick fix from them.

I couldn't exactly solve your issue, I will try around some more and if I succeed, I let you know. As of now, I am playing around with a listener on the tab, but I didn't find a listener that fires after the tab has been created, but before the item is activated:

        listeners:{
            boxready:function(me) {
                console.log(me);
                me.tab.setConfig({
                    bind:{
                        hidden: '{hideTabTwo}'
                    }
                });
            }
        }