extjs Tab content won't display

Question

In the code below, if I set the activeTab to 0, the contents of /viewer/welcome show up as expected. If I set activeTab to 1 (like below), the second tab is activated on load, but when I click on the first tab, the content never displays. I can see it loading the content for the tab BEFORE I click on the tab (if I set autoLoad: false, it doesn't load it at all), but even though it loaded, it doesn't display.

{
    xtype: 'tabpanel',
    activeTab: 1,
    items: [
        {
            xtype: 'panel',
            loader: {
                url: '/viewer/welcome/',
                renderer: 'html',
                autoLoad: true
            },
            layout: {
                type: 'fit'
            },
            title: 'Welcome'
        },
                    ...
       }

Why doesn't the content of the tab actually render when the tab is activated? Why does it work if that tab is the active tab on load, but not when it is activated otherwise?

If I make these changes, the text displays all the time as expected, but I get an extra page load from the spurious activate call.

{
    xtype: 'tabpanel',
    activeTab: 1,
    items: [
        {
            xtype: 'panel',
            loader: {
                url: '/viewer/welcome/',
                renderer: 'html',
                autoLoad: false
            },
            layout: {
                type: 'fit'
            },
            title: 'Welcome',
            listeners: {
                activate: function(me, opts) {
                     me.getLoader().load();
                }
            }
        },
                    ...
       }

I'm just not understanding why the tabs are not managing this content as part of being a tab.....

It's a good question. I don't experience this issue with Grid Panels in Tabs. That works just as expected. It must have something to do with the loader config, I never used it before. What version r u currently running? There might be a bug filed on this. — dbrin
4.07 (I'm just starting with it and most everything else behaves as expected, so yea, maybe its just a bug). I'm fairly confident the double activate is a bug from walking the stack when the first activate happens. — boatcoder
The double activation bug has been logged here sencha.com/forum/… — boatcoder

dbrin dbrin · Accepted Answer · 2011-12-14T04:01:46

I think the problem here is what you have indicated - the tabs are not managing content. The reason why they are not managing it properly is the HTML content that gets returned from loader is just that - some HTML, it is not an ExtJS Component. It is arguable that ExtJS "should" manage content that it has loaded but the docs allude to the contrary: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component-cfg-html It might be worth while filing a bug on this.

Also, I noticed you had a fit layout specified on the welcome panel. Since you have no other items contained in that panel, you probably don't need that setting - incidentally it may (or may not) improve how the loaded html fragment gets handled.

Good luck.

extjs Tab content won't display

2 Answers