[Commits] r1413 - in core/trunk/docsrc: examples tutorials
commits at geoext.org
commits at geoext.org
Mon Oct 12 12:51:45 CEST 2009
Author: ahocevar
Date: 2009-10-12 12:51:45 +0200 (Mon, 12 Oct 2009)
New Revision: 1413
Modified:
core/trunk/docsrc/examples/index.rst
core/trunk/docsrc/tutorials/layertree-tutorial.rst
Log:
updated layer tree documentation; added layer tree example to the examples list (see #98)
Modified: core/trunk/docsrc/examples/index.rst
===================================================================
--- core/trunk/docsrc/examples/index.rst 2009-10-12 08:05:25 UTC (rev 1412)
+++ core/trunk/docsrc/examples/index.rst 2009-10-12 10:51:45 UTC (rev 1413)
@@ -4,6 +4,8 @@
* `Feature Grid <http://dev.geoext.org/trunk/geoext/examples/feature-grid.html>`_
+* `Layer Tree <http://dev.geoext.org/trunk/geoext/examples/tree.html>`_
+
* `Map Panel <http://dev.geoext.org/trunk/geoext/examples/mappanel-window.html>`_
* `Popups <http://dev.geoext.org/trunk/geoext/examples/popup.html>`_
Modified: core/trunk/docsrc/tutorials/layertree-tutorial.rst
===================================================================
--- core/trunk/docsrc/tutorials/layertree-tutorial.rst 2009-10-12 08:05:25 UTC (rev 1412)
+++ core/trunk/docsrc/tutorials/layertree-tutorial.rst 2009-10-12 10:51:45 UTC (rev 1413)
@@ -44,22 +44,154 @@
root: layerList
});
-``LayerContainer``\ s automatically add checkboxes that can be used to toggle
-the visibility of layers. You can also enable drag-n-drop layer reordering by
-simply setting the ``enableDD`` property of the ``TreePanel``.
+``LayerContainer``\ s automatically add checkboxes (radio buttons for base
+layers) that can be used to toggle the visibility of layers. You can also enable
+drag-n-drop layer reordering by simply setting the ``enableDD`` property of the
+``TreePanel``.
Filtering
=========
-Currently, the ``LayerContainer`` automatically pulls in all layers from the
-store and displays those with the ``displayInLayerSwitcher`` property set to
-true. In the future (but before the robots take over) you will be able to filter
-out some layers by providing a filter function. By adding multiple named and
-filtered ``LayerContainer``\ s to a ``TreePanel`` you will be able to provide
-logical organization to your layer trees. In the meantime, you can directly
-instantiate :class:`GeoExt.LayerNode` to create tree nodes that can be added
-anywhere in a tree. Keep in mind, however, that this approach does not allow for
-automatic drag-n-drop support.
+By default, the ``LayerContainer``'s ``LayerLoader`` automatically pulls in all layers from the store and displays those with the ``displayInLayerSwitcher``
+property set to true. You can provide your own filter function to the loader:
+.. code-block:: javascript
+
+ var layerList = new GeoExt.tree.LayerContainer({
+ text: 'Tasmania Layers',
+ layerStore: mapPanel.layers,
+ leaf: false,
+ expanded: true,
+ loader: {
+ filter: function(record) {
+ return record.get("layer").name.indexOf("Tasmania") !== -1
+ }
+ }
+ });
+
+The above will only load layers with "Tasmania" in their name. By adding
+multiple named and filtered ``LayerContainer``\ s to a ``TreePanel`` you are
+able to provide logical organization to your layer trees. When ``enableDD`` is
+set to true on the tree, drag-n-drop will also work between filtered layer
+containers, as long as they have the same parent node. You can also directly
+instantiate :class:`GeoExt.tree.LayerNode` to create tree nodes that can be
+added anywhere in a tree. Keep in mind, however, that this approach does not
+allow for automatic drag-n-drop support.
+
+.. note::
+
+ There are two LayerContainer types with a preconfigured filter:
+
+ * :class:`GeoExt.tree.BaseLayerContainer` will be populated only with layers
+ that have isBaseLayer set to true,
+ * :class:`GeoExt.tree.OverlayLayerContainer` will be populated only with
+ layers that have isBaseLayer set to false.
+
+Visibility Grouping
+===================
+
+The concept of a base layer in OpenLayers is just a gruop of layers that are on
+the bottom of the layer stack, and only one can be visible at a time. In maps
+without base layers (when ``allOverlays`` is set to true, the latter can be
+enforced by configuring a ``checkedGroup`` on a LayerNode. Such a layer node
+will be rendered with a radio button instead of a check box. Of all layers
+configured with the same ``checkedGroup``, only one will be visible at a time:
+
+.. code-block:: javascript
+
+ var layerList = new GeoExt.tree.LayerContainer({
+ text: 'Tasmania Layers',
+ layerStore: mapPanel.layers,
+ leaf: false,
+ expanded: true,
+ loader: {
+ filter: function(record) {
+ return record.get("layer").name.indexOf("Tasmania") !== -1
+ },
+ baseAttrs: {
+ checkedGroup: "tasmania"
+ }
+ }
+ });
+
+Layer Nodes with Additional Radio Buttons
+=========================================
+
+It is possible to render layer nodes with an additional radio button. This can
+be useful if an application uses the concept of an "active layer". The active
+layer can then be set by clicking its radio button:
+
+.. code-block:: javascript
+
+ var layerList = new GeoExt.tree.LayerContainer({
+ text: 'All Layers',
+ layerStore: mapPanel.layers,
+ leaf: false,
+ expanded: true,
+ loader: {
+ baseAttrs: {
+ radioGroup: "active"
+ }
+ }
+ });
+ var registerRadio = function(node)
+ if(!node.hasListener("radiochange")) {
+ node.on("radiochange", function(node){
+ /* set your active layer here */
+ });
+ }
+ }
+ var layerTree = new Ext.tree.TreePanel({
+ title: 'Map Layers',
+ renderTo: 'layerTree',
+ root: layerList,
+ listeners: {
+ append: registerRadio,
+ insert: registerRadio
+ }
+ });
+
+The layer node fires the "radiochange" event when the radio button is clicked.
+The above snippet configures a listener for this event when a node is added to
+or inserted in the tree.
+
+Sub-Layers
+==========
+
+Layers that have a ``params`` property (like ``OpenLayers.Layer.WMS``) can be
+used to create sub-layers based on one of the ``params`` properties. This is
+useful to e.g. create sub-nodes from the layer object's "LAYERS" or "CQL_FILTER"
+param:
+
+.. code-block:: javascript
+
+ var groupLayer = 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"
+ ],
+ transparent: true,
+ format: "image/gif"
+ }
+ );
+ var groupLayerNode = new GeoExt.tree.LayerNode({
+ layer: groupLayer,
+ leaf: false,
+ expanded: true,
+ loader: {
+ param: "LAYERS"
+ }
+ });
+
+.. note::
+ The :class:`GeoExt.tree.LayerParamLoader` does not add drag-n-drop support
+ to the sub-nodes it creates, so ``allowDrag`` and ``allowDrag`` should be
+ set to false for a :class:`GeoExt.tree.LayerNode` configured with a
+ :class:`GeoExt.class.LayerParamLoader`, unless you provide custom "move"
+ handlers.
+
.. seealso:: The ExtJS TreePanel `documentation
<http://extjs.com/deploy/dev/docs/?class=Ext.tree.TreePanel>`_ and `examples
<http://extjs.com/deploy/dev/examples/samples.html#sample-4>`_ for more
More information about the Commits
mailing list