extjs - 无法通过绑定(bind)到 Ext.js 6 中的数据属性来有条件地隐藏选项卡

Question

我有一个选项卡面板，我在第一个选项卡上捕获购物车，在第二个选项卡上捕获付款信息，并在第三个选项卡上显示摘要。

如果购物车总数为 0，我想隐藏第二个选项卡。

我遇到的问题是，当我尝试绑定(bind)到确定用于隐藏选项卡的 bool 值的公式时，选项卡不会隐藏。

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()
        })
    }
});

我看不出这里出了什么问题。如果您查看 fiddle 中 html: 'Hide Tab 2: {hideTabTwo}' 行的输出，您会发现它在 true 和 false 之间切换。

有什么想法吗？

Answer 1

我发布了 this same question to Sencha's forums一位用户指出了正确答案。

我的代码和他的代码之间的区别在于，绑定(bind)到第二个选项卡的 hidden 属性需要包含在选项卡的 tabConfig 属性中:

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

在看到他的解决方案后，我回到了 Ext.tab.Panel 上的文档，它在 controlling tabs 部分下有注释.

我找错了地方(Ext.tab.Tab 的文档中未提及 tabConfig 也无济于事:/) .