如何使选项卡中的标题绑定在ExtJS7中工作？

Question

在现代工具包中使用ExtJS7.x。

出于各种原因，我试图将TabPanel中的面板标题绑定到数据中，这似乎很好，如果不是因为一个警告。只有在选项卡激活时，绑定才会应用。在官方论坛上进行拖网搜索，我发现这在几年前就在ExtJS6中被标记为ExtJS6，并被报道为已被修复。但我还是在7岁时遇到了类似的行为。

我试图做的事情的基本概况：

{
        xtype: 'tabpanel',
        defaults: {
            iconAlign: 'left',
        },
        items: [
            {
                xtype: 'panel',
                border: true,
                padding: 5,
                iconCls: 'x-fa fa-ellipsis-v',
                title: 'Overview',
                bind: {
                    title: '{anonymous.overview.title}'
                }
            },{
                xtype: 'panel',
                iconCls: 'x-fa fa-envelope-open',
                bind: {
                    title: 'Test'
                }
            }, {
                xtype: 'panel',
                reference: 'auditgrid',
                iconCls: 'x-fa fa-clipboard-list',
                title: 'Audits',
            }
        ]
    }

在这里可以获得小提琴格式。

在这里绑定硬编码字符串以进行测试。它最终将是一个更多的变量字符串，但我试图弄清楚，由于字符串是从外部源加载的，所以在ViewModel中可用数据的时间安排是否有问题(似乎不是)

第一个选项卡被绑定中的数据覆盖它的标题，因为它是自动激活的。然而，第二个只有一个图标，没有标题，直到它被点击。

我试图偷偷地迫使所有面板在beforeShow事件处理程序中激活，但这并不会触发绑定。这就引出了问题。有没有人对这个问题有合理的解决办法或解决办法？我曾试图对ExtJS6提供的覆盖进行逆向工程，但没有任何成功的办法。

还是我只是在做丁格斯我是不是做错了什么？

Answer 1

尝试使用tab config属性绑定标题，如下所示：

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.Viewport.add({
            xtype: 'tabpanel',
            viewModel: {
                data: {
                    someTabTitle: 'Some Tab Title'
                }
            },
            defaults: {
                iconAlign: 'left',
            },
            items: [{
                xtype: 'panel',
                border: true,
                padding: 5,
                iconCls: 'x-fa fa-ellipsis-v',
                title: 'Overview',
                bind: {
                    title: 'Test 1'
                }
            }, {
                xtype: 'panel',
                iconCls: 'x-fa fa-envelope-open',
                tab: {
                    bind: {
                        title: '{someTabTitle}'
                    }
                }
            }, {
                xtype: 'panel',
                reference: 'auditgrid',
                iconCls: 'x-fa fa-clipboard-list',
                title: 'Audits',
            }]
        });
    }
});