[Commits] r817 - core/trunk/geoext/examples

Tue May 19 18:07:32 CEST 2009

Author: tschaub
Date: 2009-05-19 18:07:32 +0200 (Tue, 19 May 2009)
New Revision: 817

Added:
   core/trunk/geoext/examples/layercontainer.html
   core/trunk/geoext/examples/layercontainer.js
Log:
Adding a simple example deomonstrating a layer tree that supports layer ordering via drag-drop.

Added: core/trunk/geoext/examples/layercontainer.html
===================================================================

--- core/trunk/geoext/examples/layercontainer.html	                        (rev 0)
+++ core/trunk/geoext/examples/layercontainer.html	2009-05-19 16:07:32 UTC (rev 817)
@@ -0,0 +1,30 @@
+<html>
+    <head>
+        <title>GeoExt Layer Tree</title>
+
+        <script type="text/javascript" src="http://extjs.cachefly.net/builds/ext-cdn-771.js"></script>
+        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
+        <link rel="stylesheet" type="text/css" href="http://extjs.com/deploy/dev/examples/shared/examples.css"></link>
+        <script src="http://openlayers.org/api/2.8-rc2/OpenLayers.js"></script>
+        <script type="text/javascript" src="../lib/GeoExt.js"></script>
+
+        <script type="text/javascript" src="layercontainer.js"></script>
+
+    </head>
+    <body>
+        <h1>Layer Tree Example</h1>
+        <p>This is example that shows how create a TreePanel with layers
+        from a map.  GeoExt does not provide a LayerTree component.  Instead,
+        to create a tree with nodes that represent layers, create a tree with
+        a LayerContainer at the root, or add LayerNodes directly.</p>
+
+        <p>Note that the js is not minified so it is readable.
+        See <a href="treenodes.js">layernodes.js</a>.</p>
+
+        <div style="position: relative;">
+            <div id="capgrid"></div>
+            <div id="tree"></div>
+            <div id="mappanel"></div>
+        </div>
+    </body>
+</html>

Added: core/trunk/geoext/examples/layercontainer.js
===================================================================
--- core/trunk/geoext/examples/layercontainer.js	                        (rev 0)
+++ core/trunk/geoext/examples/layercontainer.js	2009-05-19 16:07:32 UTC (rev 817)
@@ -0,0 +1,74 @@
+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();
+
+    // create a grid to display records from the store
+    var grid = new Ext.grid.GridPanel({
+        title: "WMS Capabilities",
+        store: store,
+        cm: new Ext.grid.ColumnModel([
+            {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",
+        height: 300,
+        width: 350,
+        floating: true,
+        x: 10,
+        y: 0,
+        bbar: ["->", {
+            text: "Add Layer",
+            handler: function() {
+                var record = grid.getSelectionModel().getSelected();
+                if(record) {
+                    var copy = record.copy();
+                    copy.set("layer", record.get("layer"));
+                    copy.get("layer").mergeNewParams({
+                        format: "image/png",
+                        transparent: "true"
+                    });
+                    panel.layers.add(copy);
+                    panel.map.zoomToExtent(
+                        OpenLayers.Bounds.fromArray(copy.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
+        }),
+        enableDD: true,
+        width: 170,
+        height: 300,
+        floating: true,
+        x: 380,
+        y: 0
+    });
+    
+
+});

