通过绑定到Ext.js 6中的数据属性,无法通过条件隐藏选项卡

Question

我有一个tabpanel,我在第一个标签上捕获购物车,第二个标签上显示付款信息,在第三个标签上显示摘要.

如果购物车总数为0,我想隐藏标签二.

我遇到的问题是,当我尝试绑定到一个确定隐藏选项卡的布尔值的公式时,选项卡不会隐藏.

这是一个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()
        })
    }
});

我看不出这里出了什么问题.如果你看一下html: 'Hide Tab 2: {hideTabTwo}'小提琴中的那一行的输出,你会发现它在true和false之间切换.

有任何想法吗？

Answer 1

我在Sencha的论坛上发布了同样的问题,用户指出了正确的答案.

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

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

在看到他的解决方案之后,我回到Ext.tab.Panel了控制标签部分下面的文档.

我在错误的地方寻找(它也没有帮助,tabConfig在Ext.tab.Tab文档中没有提到:/).