How to make title binding in tabpanel tabs work in ExtJS7?

Question

Using ExtJS7.x with the modern toolkit.

For various reasons, I'm trying to data-bind the titles of panels in a TabPanel, this seems to work fine, if not for a single caveat. The binding only applies as soon as the tab becomes active. Trawling around the official forums I found that this was previously marked as a bug in ExtJS6 years ago, and was reported as being fixed. And yet I still run into similar behavior in 7.

Basic overview of what I'm trying to do:

{
        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',
            }
        ]
    }

Available here in fiddle format.

Binding a hard-coded string here for testing purposes. It'll be a more variable string eventually, but I was trying to figure out if it was an issue with the timing of the data being available in the ViewModel since the strings get loaded from an external source (doesn't seem to be)

The first tab correctly has it's title overwritten by the data in the binding, as it is automatically activated. The second one however, just has an icon and no title, until it is clicked.

I've tried to sneakily force all panels to activate in a beforeShow event handler, but this doesn't trigger the binding. Which leads to the question. Does anyone have a reasonable workaround or fix for this issue? I've tried to reverse-engineer the override provided for ExtJS6, but haven't had any luck making it work.

Or am I just being a dingus and am I doing something wrong here?

Answer 1

Try to use tab config property to bind the title, something like this:

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',
            }]
        });
    }
});