<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="./libs/geoext/ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="./libs/geoext/ext/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./libs/geoext/ext/resources/css/ext-all.css"></link>
<script src="./libs/geoext/openlayers/lib/OpenLayers.js" type="text/javascript"></script>
<script src="./libs/proj4js/lib/proj4js-combined.js" type="text/javascript"></script>
<script src="./libs/geoext/geoext/lib/GeoExt.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./libs/geoext/geoext/resources/css/geoext-all-debug.css"></link>
<script type="text/javascript">
var store, tree, panel, map, options;
Ext.onReady(function() {
options = {
projection : new OpenLayers.Projection("EPSG:31467")
,maxExtent : new OpenLayers.Bounds(x1, y1, x2, y2)
,maxResolution : 'auto'
,numZoomLevels : 18
,units : 'm'
}
map = new OpenLayers.Map(options);
var layer = new OpenLayers.Layer.WMS(
"Layername"
,"http://path/to/wms"
,{
layers: 'layer'
,format: 'image/png'
,transparent: true
}
,{
isBaseLayer: true
,singleTile:true
}
);
map.addLayer(layer);
// create a map panel
panel = new GeoExt.MapPanel({
renderTo: "mappanel"
,map: map
,width: 350
,height: 300
,floating: true
,x: 570
,y: 0
});
map.zoomToMaxExtent();
tree = new Ext.tree.TreePanel({
renderTo: "tree"
,root: new GeoExt.tree.LayerContainer({
text: 'Map Layers'
,layerStore: panel.layers
,leaf: false
,expanded: true
})
,enableDD: true
,width: 170
,height: 300
,floating: true
,x: 380
,y: 0
});
});
</script>
</head>
<body>
<div style="position: relative;">
<div id="capgrid"></div>
<div id="tree"></div>
<div id="mappanel"></div>
</div>
</body>
</html>