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

Question

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

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

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

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

是的，我有一个想法。为了验证它，我在选项卡 1 中添加到您的 fiddle：

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

结果是毁灭性的：绑定在 textfield 上正常工作，但在 tab 上不正确。

这是为什么？

我记得至少从 4.2.1 开始在 ExtJS 中就存在一个问题，它不是关于 bind，而是关于制表符。在我自己的代码中，根本不使用 bind，我写了这样的东西：

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

我记得我在 2014 年初将此作为错误提交到 Sencha 论坛中。

请同时在 Sencha 论坛中提交错误报告，以提高现有工单的优先级。请记住，他们没有在两年内解决这个问题，所以不要指望他们能快速解决问题。

我无法完全解决您的问题，我会再尝试一些，如果成功了，我会通知您。截至目前，我正在使用选项卡上的侦听器，但我没有找到在创建选项卡之后但在激活项目之前触发的侦听器：

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

Answer 2

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

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

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

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

我找错了地方（Ext.tab.Tab 的文档中没有提到 tabConfig 也无济于事：/）。