[Commits] r1414 - core/trunk/geoext/examples
commits at geoext.org
commits at geoext.org
Mon Oct 12 12:52:31 CEST 2009
Author: ahocevar
Date: 2009-10-12 12:52:31 +0200 (Mon, 12 Oct 2009)
New Revision: 1414
Modified:
core/trunk/geoext/examples/layercontainer.html
core/trunk/geoext/examples/tree.html
core/trunk/geoext/examples/tree.js
Log:
better documentation of the tree example (closes #98)
Modified: core/trunk/geoext/examples/layercontainer.html
===================================================================
--- core/trunk/geoext/examples/layercontainer.html 2009-10-12 10:51:45 UTC (rev 1413)
+++ core/trunk/geoext/examples/layercontainer.html 2009-10-12 10:52:31 UTC (rev 1414)
@@ -16,7 +16,9 @@
<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>
+ a LayerContainer at the root, or add LayerNodes directly. See also the
+ <a href="tree.html">tree</a> example for a more complex tree
+ configuration</p>
<p>Note that the js is not minified so it is readable.
See <a href="layercontainer.js">layercontainer.js</a>.</p>
Modified: core/trunk/geoext/examples/tree.html
===================================================================
--- core/trunk/geoext/examples/tree.html 2009-10-12 10:51:45 UTC (rev 1413)
+++ core/trunk/geoext/examples/tree.html 2009-10-12 10:52:31 UTC (rev 1414)
@@ -14,7 +14,7 @@
<body>
<div id="desc">
<h1>GeoExt.tree Components</h1>
- <p>This example shows how to work with layer tree. The basic
+ <p>This example shows how to work with a layer tree. The basic
component for building layer trees is the LayerNode, and there are
different types of containers for automatically adding a map's
layers to the tree. The tree configuration of this example is pure
@@ -22,6 +22,8 @@
button below the layers panel.<p>
<p>The js is not minified so it is readable. See
<a href="tree.js">tree.js</a>.</p>
+ <p>Also see the <a href="layercontainer.html">Layer Container</a>
+ example for drag-n-drop support</p>
</div>
</body>
</html>
Modified: core/trunk/geoext/examples/tree.js
===================================================================
--- core/trunk/geoext/examples/tree.js 2009-10-12 10:51:45 UTC (rev 1413)
+++ core/trunk/geoext/examples/tree.js 2009-10-12 10:52:31 UTC (rev 1414)
@@ -8,28 +8,8 @@
var mapPanel;
Ext.onReady(function() {
- // 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"}
- }
- }, {
- nodeType: "gx_layer",
- layer: "Tasmania (Group Layer)",
- isLeaf: false,
- // create subnodes for the layers in the LAYERS param
- loader: {
- param: "LAYERS"
- }
- }], true);
-
+ // create a map panel with some layers that we will show in our layer tree
+ // below.
mapPanel = new GeoExt.MapPanel({
border: true,
region: "center",
@@ -44,13 +24,15 @@
}, {
buffer: 0,
visibility: false
- }),
+ }
+ ),
new OpenLayers.Layer.WMS("Tasmania State Boundaries",
"http://demo.opengeo.org/geoserver/wms", {
layers: "topp:tasmania_state_boundaries"
}, {
buffer: 0
- }),
+ }
+ ),
new OpenLayers.Layer.WMS("Water",
"http://demo.opengeo.org/geoserver/wms", {
layers: "topp:tasmania_water_bodies",
@@ -59,7 +41,8 @@
}, {
isBaseLayer: false,
buffer: 0
- }),
+ }
+ ),
new OpenLayers.Layer.WMS("Cities",
"http://demo.opengeo.org/geoserver/wms", {
layers: "topp:tasmania_cities",
@@ -68,7 +51,8 @@
}, {
isBaseLayer: false,
buffer: 0
- }),
+ }
+ ),
new OpenLayers.Layer.WMS("Tasmania Roads",
"http://demo.opengeo.org/geoserver/wms", {
layers: "topp:tasmania_roads",
@@ -77,10 +61,18 @@
}, {
isBaseLayer: false,
buffer: 0
- }),
+ }
+ ),
+ // create a group layer (with several layers in the "layers" param)
+ // to show how the LayerParamLoader works
new OpenLayers.Layer.WMS("Tasmania (Group Layer)",
"http://demo.opengeo.org/geoserver/wms", {
- layers: "topp:tasmania_state_boundaries,topp:tasmania_water_bodies,topp:tasmania_cities,topp:tasmania_roads",
+ layers: [
+ "topp:tasmania_state_boundaries",
+ "topp:tasmania_water_bodies",
+ "topp:tasmania_cities",
+ "topp:tasmania_roads"
+ ],
transparent: true,
format: "image/gif"
}, {
@@ -89,10 +81,78 @@
// exclude this layer from layer container nodes
displayInLayerSwitcher: false,
visibility: false
- })
+ }
+ )
]
});
+
+ // 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". See the registerRadio function
+ // in the code that we use as handlers for the tree's insert and
+ // append events to make these radio buttons change the active layer.
+ loader: {
+ baseAttrs: {radioGroup: "foo"}
+ }
+ }, {
+ 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);
+
+ // the layer node's radio button with its radiochange event can be used
+ // to set an active layer.
+ var registerRadio = function(node){
+ if(!node.hasListener("radiochange")) {
+ node.on("radiochange", function(node){
+ alert(node.layer.name + " is now the the active layer.");
+ });
+ }
+ }
+ // create the tree with the configuration from above
+ var tree = new Ext.tree.TreePanel({
+ border: true,
+ region: "west",
+ title: "Layers",
+ width: 200,
+ split: true,
+ collapsible: true,
+ collapseMode: "mini",
+ autoScroll: true,
+ 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
+ }),
+ 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: {
+ "insert": registerRadio,
+ "append": registerRadio
+ },
+ rootVisible: false,
+ lines: false,
+ bbar: toolbar
+ });
+
// dialog for editing the tree configuration
var treeConfigWin = new Ext.Window({
layout: "fit",
@@ -142,42 +202,6 @@
}]
});
- var tree = new Ext.tree.TreePanel({
- border: true,
- region: "west",
- title: "Layers",
- width: 200,
- split: true,
- collapsible: true,
- collapseMode: "mini",
- autoScroll: true,
- loader: new Ext.tree.TreeLoader({
- applyLoader: false
- }),
- root: {
- nodeType: "async",
- children: Ext.decode(treeConfig)
- },
- rootVisible: false,
- lines: false,
- bbar: toolbar
- });
-
- // the layer node's radio button with its radiochange event can be used
- // to set an active layer.
- var registerRadio = function(node){
- if(!node.hasListener("radiochange")) {
- node.on("radiochange", function(node){
- alert(node.layer.name + " is now the the active layer.");
- });
- }
- }
- tree.on({
- "insert": registerRadio,
- "append": registerRadio,
- scope: this
- });
-
new Ext.Viewport({
layout: "fit",
hideBorders: true,
More information about the Commits
mailing list