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:

enter image description here

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.


  <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',
    }, {

        '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


    // 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() {

    // 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);
                    } catch(e) {
                        alert("Invalid JSON");
                    treeConfig = value;
                text: "Cancel",
                handler: function() {

    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"

1 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.

  • Consider adding a summary at least in addition to the link.
    – Sean
    Commented Jul 29, 2011 at 22:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.