通过绑定到Ext.js 6中的data属性，无法有条件地隐藏标签

Chris Schmitz 发表于 Dev

克里斯·施密茨（Chris Schmitz）

我有一个选项卡面板，其中要在选项卡1上捕获购物车，在选项卡2上捕获付款信息，并在选项卡3上显示摘要。

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

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

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之间切换。

有任何想法吗？

克里斯·施密茨（Chris Schmitz）

我在Sencha的论坛上发布了同样的问题，一个用户指出了正确的答案。

我的代码和他的代码之间的区别在于hidden，第二个选项卡的属性绑定必须包含在tabConfig该选项卡的属性中：

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

看到他的解决方案后，我回到控制选项卡Ext.tab.Panel下的文档上进行了说明。

我在错误的位置寻找信息（它也没有帮助，tabConfig在Ext.tab.Tab文档中未提及：/）。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。