TabPanel not rendering first tab

[TheOptimist]

Hi guys, I'm only just getting into ExtJS and whilst I would consider myself "good" at JS, this framework is really testing me. I've read up on the API Docs as much as possible, and searched the forums with no luck, to try and find out what I'm doing wrong (I know it's likely to be me).

I've fired up the API Docs and am using Firebug to write content into the window. All I'm trying to do at the moment is build up my knowledge in order to build a TabPanel where each Tab contains a Grid. I haven't got that far yet because when I run the below code:

Ext.get(document.body).update("<div id='content'>blah blah</div");
var BugListPanel = new Ext.TabPanel({
    renderTo:'content',
    activeTab:0,
    items:[
        {
            title:'tab 1',
            html:'this is the first tab'
        },
        {
            title:'tab 2',
            html:'this is the second tab'
        }
    ]
});

the first tab doesn't seem to render - it looks like it has a height of zero. When I flip between the tabs both tabs seem to gain an increase in height each time I flip. I know I'm probably missing something but I thought this was the simplest example I could try and not getting this working is a bit demoralising

Adding "deferredRender", which I've seen in other posts, to either the TabPanel or each item doesn't fix this either.

Anyone have any ideas about this one? Even if it's just a pointer to some documentation that I haven't read/found would be nice. I'm using Firefox 3 on a Windows machine at the moment - I'll be back on a mac later tonight so I'll be doing the same in Safari.

TheO

[Animal]

The widget needs to be given a height if you insist on rendering widgets into the DOM manually.

It is strongly recommended that you manage all your pages with a Viewport Container, and arrange all your UI controls in a managed layout which handles rendering, positioning and sizing.

[TheOptimist]

Ah, thank you - that makes sense. The "Easy Way" tutorial (which works fine) implies that you don't need to specify a height - because TabPanel extends Panel I assumed that I could do the same thing and it would all be hunky dory.

Is there a particular reason that the Panel example in the Easy Way tutorial works but the TabPanel doesn't? Just so I can start understanding this framework a little more?

Blimey, having tried reading up on this it's going to take me a little longer than I thought to understand all of this

Thanks
TheO

[Starfall]

I don't see any xtypes in items definitions. Are you sure xtype defaults to 'panel'?

[Animal]

@Starfall: xtype defaults to whatever defaulType is set to for the Container. It's set to 'panel' in the Panel class definition, so TabPanel inherits that.

@OP Panels need a height. Perhaps the example you looked at was part of a layout which managed the size like a border layout. You should be using a Viewport and layout managers to handle rendering, sizing, positioning your UI elements.

[TheOptimist]

@Animal - thanks for the assistance. It's clear I need to read more to get my head around this framework. It looks great but I'm just not "getting it" at the moment. I'm going to go back to the API and the docs to figure this one out.

For information the Easy Way tutorial code looks like this:

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
    renderTo: 'test',
    width: '200px',
    title: 'My Title',
    html: 'My HTML content'
});

[Animal]

Do not use any HTML at all. Start with a totally empty document.

Use a Viewport.

[TheOptimist]

Aye - that's what I'm going to work out now. Given that's what I want to do in the app anyway I should have started out like that instead of playing around with the HTML.

[Animal]

That tutorial is just how to execute commands in Firebug, not how to use Ext.

I don't know why it's there really.

[TheOptimist]

Ah...that would explain it!