如何使标签面板选项卡中的标题绑定在 ExtJS7 中工作？答案

【问题标题】：How to make title binding in tabpanel tabs work in ExtJS7?如何使标签面板选项卡中的标题绑定在 ExtJS7 中工作？
【发布时间】：2021-02-19 22:34:47
【问题描述】：

将 ExtJS7.x 与现代工具包一起使用。

出于各种原因，我试图在 TabPanel 中对面板的标题进行数据绑定，这似乎工作正常，如果不是一个警告的话。绑定仅在选项卡变为活动状态时应用。在官方论坛上搜索，我发现这在 6 年前在 ExtJS 中被标记为 bug，并被报告为已修复。然而我在 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',
            }
        ]
    }

在此处以fiddle 格式提供。

在此处绑定硬编码字符串以进行测试。最终它将是一个更加可变的字符串，但我试图弄清楚这是否是 ViewModel 中可用数据的时间问题，因为字符串是从外部源加载的（似乎不是）

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

我试图在 beforeShow 事件处理程序中偷偷地强制所有面板激活，但这不会触发绑定。这导致了这个问题。有没有人有一个合理的解决方法或解决这个问题？我试图对为 ExtJS6 提供的覆盖进行逆向工程，但没有任何运气让它工作。

还是说我只是个傻瓜，我在这里做错了什么？

【问题讨论】：

标签： extjs extjs7

【解决方案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',
            }]
        });
    }
});

【讨论】：