TabPanel not rendering first tab

TabPanel not rendering first tab

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:

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.

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

@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.

@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.