putting widgets inside InfoPanel

[topcoder1]

I want to add some widgets inside each InfoPanel in the accordion, in particular a treePanel.
I used var treePanel=new xt.TreePanel(parentInfoPanel.id, {...});
and also set layout on the parent InfoPanel and then add treePanel as a child. None of these approaches work as expected. In the first case the TreePanel fell outside of the InfoPanel, see attached image to see what I mean.
is this doable?

  		
var leftnav = new Ext.ux.Accordion('leftnav', {
    			fitHeight: true,
    			boxWrap:true,
    			fitContainer: true
    			, fitToFrame: true
				, useShadow: true
});
            for ( var i = 0; i < oElement.nav.length; i++) {
                if (oElement.nav[i].title) {
                  
                   var el=leftnav.add(new Ext.ux.InfoPanel(oElement.nav[i]));

					var sub_menu =new xt.TreePanel(el.id, {
       					 animate:true,
        				enableDD:true,
        				containerScroll: true,
        				lines:false,
        				rootVisible:false,
        				loader: new Ext.tree.TreeLoader({
						//	dataUrl:'menu_gen.php'
						})
    				});
    			    var croot = new xt.AsyncTreeNode({
        allowDrag:false,
        allowDrop:true,
        //id:'croot',
        text:'Packages and Components',
        cls:'croot',
        loader:new Ext.tree.TreeLoader({
            dataUrl:'menu_gen.php',
           createNode: readNode
        })
    });
/*
	           var layout = new Ext.BorderLayout(el.id, {
                north: {
                    split: false, initialSize: 10
                },
                south: {
                    split: false, initialSize: 10
                },
                east: {
                    split: false, initialSize: 10
                },
                west: {
                    split: false, initialSize: 10
                },
                center: { }
            });
	layout.add('CENTER',sub_menu);
*/
//el.setContent(sub_menu,true);
	 sub_menu.setRootNode(croot);
    sub_menu.render();
    croot.expand();