TabPanel loader only works for first tab

[Chris.Schick]

Hello,

The following used to work with 4.0.0 but with 4.1.0 only the first tab contains content. All other tabs remain empty.

new Ext.window.Window({
    "autoShow": true,
    "constrain": true,
    "height": 480,
    "id": Ext.id(),
    "items": [{
        id: "srcTabPnl",
        items: [{
            "autoScroll": true,
            "closable": false,
            "loader": {
                autoLoad: true,
                success: function () {
                    Sunlight.highlightAll();
                },
                url: "StaticContent/Source/Index/Index.htm",
                xtype: "tab"
            },
            "scripts": true,
            "title": "Index.cshtml",
            "xtype": "tab"
        }, {
            "autoScroll": true,
            "closable": false,
            "loader": {
                autoLoad: true,
                url: "StaticContent/Source/Index/HomeController.htm",
                xtype: "tab"
            },
            "title": "HomeController.cs",
            "xtype": "tab"
        }, {
            "autoScroll": true,
            "closable": false,
            "loader": {
                autoLoad: true,
                url: "StaticContent/Source/Shared/SourceWindow.htm",
                xtype: "tab"
            },
            "title": "SourceWindow.cs",
            "xtype": "tab"
        }, {
            "autoScroll": true,
            "closable": false,
            "loader": {
                autoLoad: true,
                scripts: true,
                url: "StaticContent/Source/Index/TreeData.htm",
                xtype: "tab"
            },
            "title": "IndexTreeData.js",
            "xtype": "tab"
        }, {
            "autoScroll": true,
            "closable": false,
            "loader": {
                autoLoad: true,
                scripts: true,
                url: "StaticContent/Source/Index/IndexSrc.htm",
                xtype: "tab"
            },
            "title": "Index.js",
            "xtype": "tab"
        }],
        listeners: {
            tabchange: {
                fn: function () {
                    Sunlight.highlightAll();
                }
            }
        },
        xtype: "tabpanel"
    }],
    "layout": "fit",
    "maximizable": true,
    "title": "Source View",
    "width": 790
})

[evant]

xtype: 'tab' is not the correct component to use. 'tab' refers to a component that extends Ext.button.Button.

Instead, you want something like:

Ext.require('Ext.picker.Color');
Ext.onReady(function() {
    
    Ext.create('Ext.tab.Panel', {
        renderTo: document.body,
        width: 400,
        height: 400,
        defaultType: 'component',
        items: [{
            title: 'Tab 1',
            loader: {
                autoLoad: true,
                url: 'content1.json'
            }
        }, {
            title: 'Tab 2',
            loader: {
                autoLoad: true,
                url: 'content2.json'
            }
        }]
    })
    
});

[Chris.Schick]

Ah my bad, thanks for letting me know.