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 :/ ).