[GIS] Problem with the layernode.js, GeoExt Application

Question

Attached is the code i have written on the html file.

When i run it on the mozilla firefox browser i get the following error from firebug:

Most of the code has been taken from an existing javascript file from GeoExt (tree.js).
The code i have changed/added starts from var mapPanel, tree, map;
and ends to map.addLayers(layers);

When i actually run it on a browser it is not loading properly but when i minimise it and then maximise the window i get the image that i want.

Any ideas why iam getting this error.

Thanks

  <script type="text/javascript">
var mapPanel, tree, map;
Ext.onReady( function() {


    // create a map panel with some layers that we will show in our layer tree
    // below.
    layers = [];

    layers.push(new OpenLayers.Layer.OSM());

    layers.push(new OpenLayers.Layer.WMS(
    "National Parks", "http://localhost:8080/geoserver/wms", {
        srs: 'EPSG:4326',
        layers: 'National_Parks',
        format: 'image/png',
        buffer:0
    }, {

        'isBaseLayer': false

    }
    ));

    map = new OpenLayers.Map({
        allOverlays: false,
        projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        units: "m",
        numZoomLevels: 18,
        maxResolution: 156543.0339,
        maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
        20037508, 20037508.34)
    });

    mapPanel = new GeoExt.MapPanel({
        region: "center",
        center: [-7924121.1710935, 6185868.5449234],
        zoom: 10,
        map: map
    });

    map.addLayers(layers);



    // create our own layer node UI class, using the TreeNodeUIEventMixin
    var LayerNodeUI = Ext.extend(GeoExt.tree.LayerNodeUI, new GeoExt.tree.TreeNodeUIEventMixin());

    // using OpenLayers.Format.JSON to create a nice formatted string of the
    // configuration for editing it in the UI
    var treeConfig = new OpenLayers.Format.JSON().write([{
        nodeType: "gx_baselayercontainer"
    },{
        nodeType: "gx_overlaylayercontainer",
        expanded: true,
        // render the nodes inside this container with a radio button,
        // and assign them the group "foo".
        loader: {
            baseAttrs: {
                radioGroup: "foo",
                uiProvider: "layernodeui"
            }
        }
    },{
        nodeType: "gx_layer",
        layer: "Tasmania (Group Layer)",
        isLeaf: false,
        // create subnodes for the layers in the LAYERS param. If we assign
        // a loader to a LayerNode and do not provide a loader class, a
        // LayerParamLoader will be assumed.
        loader: {
            param: "LAYERS"
        }
    }], true);

    // create the tree with the configuration from above
    tree = new Ext.tree.TreePanel({
        border: true,
        region: "west",
        title: "Layers",
        width: 200,
        split: true,
        collapsible: true,
        collapseMode: "mini",
        autoScroll: true,
        plugins: [
        new GeoExt.plugins.TreeNodeRadioButton({
            listeners: {
                "radiochange": function(node) {
                    alert(node.text + " is now the active layer.");
                }
            }
        })
        ],
        loader: new Ext.tree.TreeLoader({
            // applyLoader has to be set to false to not interfer with loaders
            // of nodes further down the tree hierarchy
            applyLoader: false,
            uiProviders: {
                "layernodeui": LayerNodeUI
            }
        }),
        root: {
            nodeType: "async",
            // the children property of an Ext.tree.AsyncTreeNode is used to
            // provide an initial set of layer nodes. We use the treeConfig
            // from above, that we created with OpenLayers.Format.JSON.write.
            children: Ext.decode(treeConfig)
        },
        listeners: {
            "radiochange": function(node) {
                alert(node.layer.name + " is now the the active layer.");
            }
        },
        rootVisible: false,
        lines: false,
        bbar: [{
            text: "Show/Edit Tree Config",
            handler: function() {
                treeConfigWin.show();
                Ext.getCmp("treeconfig").setValue(treeConfig);
            }
        }]
    });

    // dialog for editing the tree configuration
    var treeConfigWin = new Ext.Window({
        layout: "fit",
        hideBorders: true,
        closeAction: "hide",
        width: 300,
        height: 400,
        title: "Tree Configuration",
        items: [{
            xtype: "form",
            layout: "fit",
            items: [{
                id: "treeconfig",
                xtype: "textarea"
            }],
            buttons: [{
                text: "Save",
                handler: function() {
                    var value = Ext.getCmp("treeconfig").getValue()
                    try {
                        var root = tree.getRootNode();
                        root.attributes.children = Ext.decode(value);
                        tree.getLoader().load(root);
                    } catch(e) {
                        alert("Invalid JSON");
                        return;
                    }
                    treeConfig = value;
                    treeConfigWin.hide();
                }
            },{
                text: "Cancel",
                handler: function() {
                    treeConfigWin.hide();
                }
            }]
        }]
    });

    new Ext.Viewport({
        layout: "fit",
        hideBorders: true,
        items: {
            layout: "border",
            deferredRender: false,
            items: [mapPanel, tree,{
                contentEl: "desc",
                region: "east",
                bodyStyle: {
                    "padding": "5px"
                },
                collapsible: true,
                collapseMode: "mini",
                split: true,
                width: 200,
                title: "Description"
            }]
        }
    });
});

Answer 1

From geoExt, you should refer to the layer name, not to the object.

The problem and the solution are explained on that thread.