[Commits] r335 - sandbox/opengeo/geoexplorer/examples

Thu Apr 2 22:53:31 CEST 2009

Author: tschaub
Date: 2009-04-02 22:53:30 +0200 (Thu, 02 Apr 2009)
New Revision: 335

Added:
   sandbox/opengeo/geoexplorer/examples/tree.html
   sandbox/opengeo/geoexplorer/examples/tree.js
Log:
Adding a layer tree example (see #22 - requires wms cap reader)

Added: sandbox/opengeo/geoexplorer/examples/tree.html
===================================================================

--- sandbox/opengeo/geoexplorer/examples/tree.html	                        (rev 0)
+++ sandbox/opengeo/geoexplorer/examples/tree.html	2009-04-02 20:53:30 UTC (rev 335)
@@ -0,0 +1,29 @@
+<html>
+    <head>
+        <script type="text/javascript" src="../../openlayers/lib/OpenLayers.js"></script>
+        <script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
+        <script type="text/javascript" src="../../ext/ext-all-debug.js"></script>
+        <script type="text/javascript" src="../lib/GeoExt.js"></script>
+        
+        <link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css"></link>
+        <link rel="stylesheet" type="text/css" href="../../ext/examples/shared/examples.css"></link>
+
+        <script type="text/javascript" src="RowExpander.js"></script>        
+        <script type="text/javascript" src="tree.js"></script>
+
+    </head>
+    <body>
+        <h1>Layer Tree Example</h1>
+        <p>This is example that shows how create a TreePanel with layers
+        from a map.</p>
+
+        <p>Note that the js is not minified so it is readable.
+        See <a href="tree.js">tree.js</a>.</p>
+
+        <div style="position: relative;">
+            <div id="capgrid"></div>
+            <div id="tree"></div>
+            <div id="mappanel"></div>
+        </div>
+    </body>
+</html>

Added: sandbox/opengeo/geoexplorer/examples/tree.js
===================================================================
--- sandbox/opengeo/geoexplorer/examples/tree.js	                        (rev 0)
+++ sandbox/opengeo/geoexplorer/examples/tree.js	2009-04-02 20:53:30 UTC (rev 335)
@@ -0,0 +1,84 @@
+var store, tree, panel;
+Ext.onReady(function() {
+    
+    // create a new WMS capabilities store
+    store = new GeoExt.data.WMSCapabilitiesStore({
+        url: "data/wmscap.xml"
+    });
+    // load the store with records derived from the doc at the above url
+    store.load();
+
+    var xg = Ext.grid;
+
+   // row expander
+    var expander = new xg.RowExpander({
+        tpl : new Ext.Template(
+            '<p><b>Abstract:</b> {abstract}</p><br>',
+            '<p><b>Available formats:</b> {formats}</p>'
+        )
+    });
+
+    // create a grid to display records from the store
+    var grid = new Ext.grid.GridPanel({
+        title: "WMS Capabilities",
+        store: store,
+        cm: new xg.ColumnModel([
+            expander,
+            {header: "Name", dataIndex: "name", sortable: true},
+            {id: "title", header: "Title", dataIndex: "title", sortable: true}
+        ]),
+        sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
+        autoExpandColumn: "title",
+        renderTo: "capgrid",
+        plugins: expander, 
+        height: 300,
+        width: 350,
+        floating: true,
+        x: 10,
+        y: 0,
+        bbar: ["->", {
+            text: "Add Layer",
+            handler: function() {
+                var record = grid.getSelectionModel().getSelected();
+                if(record) {
+                    record = record.copy();
+                    record.get("layer").mergeNewParams({
+                        format: "image/png",
+                        transparent: "true"
+                    });
+                    panel.layers.add(record);
+                    panel.map.zoomToExtent(
+                        OpenLayers.Bounds.fromArray(record.get("llbbox"))
+                    );
+                }
+            }
+        }]
+    });
+    
+    // create a map panel
+    panel = new GeoExt.MapPanel({
+        renderTo: "mappanel",
+        width: 350,
+        height: 300,
+        floating: true,
+        x: 570,
+        y: 0
+    });
+    
+    tree = new Ext.tree.TreePanel({
+        renderTo: "tree",
+        root: new GeoExt.tree.LayerContainer({
+            text: 'Map Layers',
+            layerStore: panel.layers,
+            leaf: false,
+            expanded: true
+        }),
+        width: 170,
+        height: 300,
+        floating: true,
+        x: 380,
+        y: 0
+    });
+    
+
+});

