When adding a tab to a tabpanel via add, the content is rendered over the tabs as shown below:

Here is what I've been able to deduce:

  1. This does not occur if the tab is added in the initial config
  2. Clicking on a new tab in the inner tabpanel cause the layout to correct itself
  3. This will also happen if the tab is of type "panel" as long as it continues to contain sub-items

			Ext.onReady(function() {
				var panel = new Ext.create ( 'Ext.tab.TabPanel', {
					region: 'center',
					renderTo: Ext.getBody(),
					width: 600,
					height: 350

				var t = Ext.create ( 'Ext.tab.TabPanel', {
					title: 'Test 1',
					items: [{
						title: 'Test 2',
						flex: 1
					}, {
						title: 'Test 3',
						flex: 1
				panel.add (t);
				panel.setActiveTab (t);