3

我有一个标签面板,我在标签一上捕获购物车,在标签二上捕获付款信息,并在标签三上显示摘要。

如果购物车总数为 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}'小提琴中该行的输出,您会发现它在真假之间切换。

有任何想法吗?

4

2 回答 2

7

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

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

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

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

我找错地方了(这也没有帮助,文档tabConfig中没有提到Ext.tab.Tab:/)。

于 2016-08-16T16:12:34.013 回答
0

是的,我有一个想法。为了验证它,我在 Tab 1 中添加了您的小提琴:

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

结果是毁灭性的:绑定适用于文本字段,但不适用于选项卡。

这是为什么?

我记得至少从 4.2.1 开始,ExtJS 中一直存在一个问题,它不是关于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}'
                    }
                });
            }
        }
于 2016-08-13T04:06:41.083 回答