TreePanel question

[badgerd]

Hi there I am using the TreePanel example in my application, the TreePanel is loading and the root node appears, but the remainder of the tree does not want to appear.

What would be the issue? I have tried searching and cannot find anything as yet.

JSON data - menu.cfm

[{"text":"build","id":"\/build","cls":"folder"},{"text":"INCLUDE_ORDER.txt","id":"\/INCLUDE_ORDER.txt","leaf":true,"cls":"file"},{"text":"ext-core.js","id":"\/ext-core.js","leaf":true,"cls":"file"},{"text":"air","id":"\/air","cls":"folder"},{"text":"source","id":"\/source","cls":"folder"},{"text":"adapter","id":"\/adapter","cls":"folder"},{"text":"examples","id":"\/examples","cls":"folder"},{"text":"docs","id":"\/docs","cls":"folder"},{"text":"CHANGES.txt","id":"\/CHANGES.txt","leaf":true,"cls":"file"},{"text":"ext-all.js","id":"\/ext-all.js","leaf":true,"cls":"file"},{"text":"ext-core-debug.js","id":"\/ext-core-debug.js","leaf":true,"cls":"file"},{"text":"LICENSE.txt","id":"\/LICENSE.txt","leaf":true,"cls":"file"},{"text":"ext-all-debug.js","id":"\/ext-all-debug.js","leaf":true,"cls":"file"},{"text":"resources","id":"\/resources","cls":"folder"},{"text":"dev","id":"\/dev","leaf":true,"cls":"file"},{"text":"CHANGES.html","id":"\/CHANGES.html","leaf":true,"cls":"file"}] 

JS

Ext.onReady(function(){
    
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    
    var tools = [{
        id:'close',
        handler: function(e, target, panel){
            panel.ownerCt.remove(panel, true);
        }
    }];
    
    var viewport = new Ext.Viewport({
        layout:'border',
        border: false,
        items:[{xtype:'portal',
            region:'center',
            border: false,
            margins: setTopMargin + ' 5 5 0',

            items:[{
                width:200,
                id:'col1',
                style:'padding:10px',
                items:[
                {
                    title: 'Tree Menu',
                    html: '<div id="tree-div" style="overflow:auto; height:300px;width:250px;border:0px solid #c3daf9;"></div>'                
                    }]
            },{
                columnWidth:1,
                style:'padding:10px 10px 10px 10px',
                items:[{
                    title: 'News',
                    cls: 'centre-panel',
                    html: Ext.example.News
                }]
            },{
                width:215,
                id:'col3',
                style:'padding:10px',
                items:[{
                    title: 'Template',
                    html: Ext.example.Template
                }]
            }]
        }]
    });
    
    var Tree = Ext.tree;
    
    var tree = new Tree.TreePanel({
        el:'tree-div',
        useArrows:true,
        autoScroll:true,
        animate:true,
        enableDD:true,
        containerScroll: true, 
        loader: new Tree.TreeLoader({
            dataUrl:'menu.cfm'
        })
    });

    // set the root node
    var root = new Tree.AsyncTreeNode({
        text: 'Ext JS',
        draggable:false,
        id:'source'
    });
    tree.setRootNode(root);

    // render the tree
    tree.render();
    root.expand();

}); 

No javascript errors occur and firebug does not appear the contain the data.

Am I trying to load the tree data at the wrong time?

[badgerd]

/bump

I have not yet been able to find a solution to this issue. Is there anyone that may be able to assist me?