putting widgets inside InfoPanel

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?

Code:

---

                 
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();

---

In case my intention wasn't stated clear. I just saw exactly what I want from another thread's image attachment:
http://extjs.com/forum/attachment.ph...8&d=1183908997
it shows a TreePanel inside an Accordion InfoPanel. how can this be done?

I just tried another variant:
var treePanel=new xt.TreePanel(parentInfoPanel.getEl().id, {...});
instead of var treePanel=new xt.TreePanel(parentInfoPanel.id, {...});
this time all the treePanels fall into the last InfoPanel.

And then added some alert statement inside each loop after creating each InfoPanel and the treePanel. Because of the alert delay this time everything works fine as expected. But obviously this is not solution. still need help...

It turns out that readNode is doing something wicked: croot for reasons unkown always point to the last croot(the root of the last TreePanel) instead of the root of the corresponding TreePanel, so everything everything gets added to the last TreePanel.... I am still baffled as to how this happens.... I guess I am not sane anymore..
(ps: the correct expression for adding a child can also be var treePanel=new xt.TreePanel(parentInfoPanel.body, {...});)

Code:

---

        function readNode(o){

                createComponent(o.id, o.text);
        }

    function createComponent(id, text){
        var node = new xt.TreeNode({
            text: text,
            iconCls:'cmp',
            cls:'cmp',
            type:'cmp',
            id: id,
            cmpId:id,
            allowDelete:true,
            allowEdit:true
        });

        croot.appendChild(node);

        var files = new xt.AsyncTreeNode({
            text: 'Files',
            allowDrag:false,
            allowDrop:true,
            iconCls:'folder',
            type:'fileCt',
            cmpId:id,
            allowDelete:false,
            children:[],
            expanded:true
        });
       
        node.appendChild(files);
        return node;
    }

}

---

Here is code of tree in the InfoPanel that I use on the Accordion Demo Page - you can see it in action on the Linked tab.

PHP Code:

---

    var lpanel112 = accl11.add(new Ext.ux.InfoPanel('lpanel-112', {
        icon:iconPath + 'bell.png'
        , autoScroll: true
        , maxHeight: 400
        , fixedHeight: 260
    }));

    // tree in the panel
    var tree = new Ext.tree.TreePanel(lpanel112.body, {
        animate: true
        , loader: new Ext.tree.TreeLoader({dataUrl: 'get-nodes.php'})
        , containerScroll: true
        , enableDD: true
    });
    var root = new Ext.tree.AsyncTreeNode({
        text: 'extjs'
        , id: 'extjs'
    });
    tree.setRootNode(root);
    tree.render();
    root.expand(); 


---

I assumed you can put a grid on an InfoPanel as well but I am not having much luck. I have created roughly the same structure as above, but for some reason the grid never renders. Any pointers?

HTML Code:

---

<div id="center-div" style="height:100%;width:100%">
    <div id="pnlCenter" style="height:100%;width:100%;background-color:Aqua"></div>
</div>

---

Code:

---

var iconPath = 'images/icons/';
           
          //set up Work Breakdown Accordion
          var acc = new Ext.ux.Accordion('center-div', {
              fitHeight: true,
              fitToFrame: true,
              fitContainer: true
            })
          //define a panel
          var pnlCent = acc.add(new Ext.ux.InfoPanel('pnlCenter', {
              icon:iconPath + 'folder.png'
              , autoScroll: true
              , maxHeight: 500
              , fixedHeight: 460
            }));
           
          //set up dataStore for the grid 
          var dataStore = new Ext.data.Store({
                proxy: new Ext.data.HttpProxy({url: 'PolicyTransactions.xml'}),
                reader: new Ext.data.XmlReader({
                    record: 'WorkItem',
                    id: 'WITTSID'
                },
                ['Type', 'Status', 'Priority', 'AssignedResource', 'TransactionCode']
            )})
            //set up the grid columns
            var colModel = new Ext.grid.ColumnModel(
            [
                {header: "Status", width: 120, dataIndex: 'Status'},
                {header: "Priority", width: 180, dataIndex: 'Priority'},
                {header: "AssignedResource", width: 115, dataIndex: 'AssignedResource'},
                {header: "TransactionCode", width: 100, dataIndex: 'TransactionCode'}
            ]);
            //create the grid                                               
            var grid = new Ext.grid.Grid(pnlCent.body, {
                ds: dataStore,
                cm: colModel
            });
            dataStore.load();
            grid.render();

---

This is supported from ver. 1.1-beta1 up. See http://aariadne.com/accordion-preview?showGrid=true tab Panels. Switch off animation of panel as it doesn't play well with grid.