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"
}]
}
});
});
