In my 2-level tabs experiment, I am running into these 2 problems:

1. I get an "st undefined" error in firebug, which I believe is for the 2nd level tabs (the ones created in the for-loop).

2. Unless I specify a height for the top-level panel, the 2nd level panels don't show. I don't want to specify a height since I want the outside panel to get resized (and become scrollable if needed) when clicking on the 2nd level results in loading lengthy content.

Any help on both/either of these issues will be greatly appreciated. The code is pasted below (please note that the tab addition work happens in a JSon load handler callback in my application. I am doing it serially here to isolate the problem).

Code:
Ext.onReady(function(){
 
   var p = new Ext.Panel({
        title:'MultiLevel Tabs test',
        renderTo: 'container',
        layout: 'column',
        footer: true,
        items: [{
                region: 'west',
                id: 'west-panel',
                title: 'External Links',
                layout: 'accordion',
                width: 200,
                height: 700,
                html:'  test junk in the west panel'
            },
            {
                region: 'center',
                xtype: 'tabpanel',
                id: 'center-panel',
                columnWidth: 1,
                plain:true,
                defaults:{autoScroll: true}
            },
            {
                region: 'east',
                id: 'east-panel',
                title: 'Search',
                layout: 'accordion',
                width: 200,
                html:'  test junk in the east panel'
            }
       ]
   });
 
    var l1Panel = Ext.getCmp('center-panel');
 
    var l2Panel = l1Panel.add({xtype: 'tabpanel', title: 'Added Tab', deferredRender : false, activeTab: 0 });
    for (j = 0; j < 5; j++) {
        l2Panel.add({xtype: 'tabpanel', title: j, html: 'Placeholder Text for second level tab'});
    }
});
HTML Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
  <title>Knowledge Base</title>
    <link rel="stylesheet" type="text/css" href="ext-2.1/resources/css/ext-all.css"></link>
    <link rel="stylesheet" type="text/css" href="Templates/cskb.css"></link>
    <script language="javascript" type="text/javascript" src="ext-2.1/adapter/ext/ext-base.js"></script>
    <script language="javascript" type="text/javascript" src="ext-2.1/ext-all-debug.js"></script>
 
    <script language="javascript" type="text/javascript" src="2leveltab.js"></script>
 
</head>
<body>
    <div id="container">
    </div>
 </body>
</html>