[Commits] r1345 - in sandbox/camptocamp/geobretagne: examples lib/GeoExt/widgets/tree
commits at geoext.org
commits at geoext.org
Tue Sep 1 13:15:32 CEST 2009
Author: elemoine
Date: 2009-09-01 13:15:32 +0200 (Tue, 01 Sep 2009)
New Revision: 1345
Modified:
sandbox/camptocamp/geobretagne/examples/tree-tools.html
sandbox/camptocamp/geobretagne/examples/tree-tools.js
sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/tree/LayerNode.js
Log:
applying patch-139-r1344-A2.diff from #139
Modified: sandbox/camptocamp/geobretagne/examples/tree-tools.html
===================================================================
--- sandbox/camptocamp/geobretagne/examples/tree-tools.html 2009-09-01 05:52:36 UTC (rev 1344)
+++ sandbox/camptocamp/geobretagne/examples/tree-tools.html 2009-09-01 11:15:32 UTC (rev 1345)
@@ -69,3 +69,287 @@
</div>
</body>
</html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>GeoExt Tree Tools</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.cachefly.net/ext-2.2.1/examples/shared/examples.css" />
+
+ <!--
+ <script type"text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
+ <script type"text/javascript" src="../../ext/ext-all-debug.js"></script>
+ <link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css"></script>
+ -->
+
+ <script src="http://openlayers.org/api/2.8/OpenLayers.js"></script>
+ <script type="text/javascript" src="../lib/GeoExt.js"></script>
+
+ <script type="text/javascript" src="tree-tools.js"></script>
+
+ <style type="text/css">
+ .gx-tree-layer-actions{
+ float: right;
+ }
+ .gx-tree-layer-action {
+ background-position: center center;
+ background-repeat: no-repeat;
+ border: 0 none;
+ height: 16px;
+ margin: 0;
+ padding: 0;
+ vertical-align: top;
+ width: 16px;
+ }
+ .gx-tree-layer-actions .delete {
+ background: transparent url(resources/img/delete.gif);
+ }
+ .gx-tree-layer-actions .up {
+ background: transparent url(resources/img/move_up.png);
+ }
+ .gx-tree-layer-actions .down {
+ background: transparent url(resources/img/move_down.png);
+ }
+ .gx-tree-layer-actions .tbar {
+ background: transparent url(resources/img/info.png);
+ }
+ .gx-toolbar {
+ background: none;
+ border-style: none;
+ left: 15;
+ }
+ .x-tree-node-collapsed .x-tree-node-icon, .x-tree-node-expanded .x-tree-node-icon, .x-tree-node-leaf .gx-tree-layer-icon {
+ width: 0px; !important;
+ }
+ </style>
+
+ </head>
+ <body>
+ <div id="desc">
+ <h1>GeoExt Tree Node UI</h1>
+
+ <p>This example shows how to add tools (actions) and components in
+ tree nodes. The tools added here allow moving the layers up and
+ down and deleting them. The component added for each node is a
+ toolbar including an opacity slider which acts on the node's
+ layer.</p>
+
+ <p>The js is not minified so it is readable. See
+ <a href="tree-tools.js">tree-tools.js</a>.</p>
+ </div>
+ </body>
+</html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>GeoExt Tree Tools</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.cachefly.net/ext-2.2.1/examples/shared/examples.css" />
+
+ <!--
+ <script type"text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
+ <script type"text/javascript" src="../../ext/ext-all-debug.js"></script>
+ <link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css"></script>
+ -->
+
+ <script src="http://openlayers.org/api/2.8/OpenLayers.js"></script>
+ <script type="text/javascript" src="../lib/GeoExt.js"></script>
+
+ <script type="text/javascript" src="tree-tools.js"></script>
+
+ <style type="text/css">
+ .gx-tree-layer-actions{
+ float: right;
+ }
+ .gx-tree-layer-action {
+ background-position: center center;
+ background-repeat: no-repeat;
+ border: 0 none;
+ height: 16px;
+ margin: 0;
+ padding: 0;
+ vertical-align: top;
+ width: 16px;
+ }
+ .gx-tree-layer-actions .delete {
+ background: transparent url(resources/img/delete.gif);
+ }
+ .gx-tree-layer-actions .up {
+ background: transparent url(resources/img/move_up.png);
+ }
+ .gx-tree-layer-actions .down {
+ background: transparent url(resources/img/move_down.png);
+ }
+ .gx-tree-layer-actions .tbar {
+ background: transparent url(resources/img/info.png);
+ }
+ .gx-toolbar {
+ background: none;
+ border-style: none;
+ left: 15;
+ }
+ .x-tree-node-collapsed .x-tree-node-icon, .x-tree-node-expanded .x-tree-node-icon, .x-tree-node-leaf .gx-tree-layer-icon {
+ width: 0px; !important;
+ }
+ </style>
+
+ </head>
+ <body>
+ <div id="desc">
+ <h1>GeoExt Tree Node UI</h1>
+
+ <p>This example shows how to add tools (actions) and components in
+ tree nodes. The tools added here allow moving the layers up and
+ down and deleting them. The component added for each node is a
+ toolbar including an opacity slider which acts on the node's
+ layer.</p>
+
+ <p>The js is not minified so it is readable. See
+ <a href="tree-tools.js">tree-tools.js</a>.</p>
+ </div>
+ </body>
+</html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>GeoExt Tree Tools</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.cachefly.net/ext-2.2.1/examples/shared/examples.css" />
+
+ <!--
+ <script type"text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
+ <script type"text/javascript" src="../../ext/ext-all-debug.js"></script>
+ <link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css"></script>
+ -->
+
+ <script src="http://openlayers.org/api/2.8/OpenLayers.js"></script>
+ <script type="text/javascript" src="../lib/GeoExt.js"></script>
+
+ <script type="text/javascript" src="tree-tools.js"></script>
+
+ <style type="text/css">
+ .gx-tree-layer-actions{
+ float: right;
+ }
+ .gx-tree-layer-action {
+ background-position: center center;
+ background-repeat: no-repeat;
+ border: 0 none;
+ height: 16px;
+ margin: 0;
+ padding: 0;
+ vertical-align: top;
+ width: 16px;
+ }
+ .gx-tree-layer-actions .delete {
+ background: transparent url(resources/img/delete.gif);
+ }
+ .gx-tree-layer-actions .up {
+ background: transparent url(resources/img/move_up.png);
+ }
+ .gx-tree-layer-actions .down {
+ background: transparent url(resources/img/move_down.png);
+ }
+ .gx-tree-layer-actions .tbar {
+ background: transparent url(resources/img/info.png);
+ }
+ .gx-toolbar {
+ background: none;
+ border-style: none;
+ left: 15;
+ }
+ .x-tree-node-collapsed .x-tree-node-icon, .x-tree-node-expanded .x-tree-node-icon, .x-tree-node-leaf .gx-tree-layer-icon {
+ width: 0px; !important;
+ }
+ </style>
+
+ </head>
+ <body>
+ <div id="desc">
+ <h1>GeoExt Tree Node UI</h1>
+
+ <p>This example shows how to add tools (actions) and components in
+ tree nodes. The tools added here allow moving the layers up and
+ down and deleting them. The component added for each node is a
+ toolbar including an opacity slider which acts on the node's
+ layer.</p>
+
+ <p>The js is not minified so it is readable. See
+ <a href="tree-tools.js">tree-tools.js</a>.</p>
+ </div>
+ </body>
+</html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>GeoExt Tree Tools</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.cachefly.net/ext-2.2.1/examples/shared/examples.css" />
+
+ <!--
+ <script type"text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
+ <script type"text/javascript" src="../../ext/ext-all-debug.js"></script>
+ <link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css"></script>
+ -->
+
+ <script src="http://openlayers.org/api/2.8/OpenLayers.js"></script>
+ <script type="text/javascript" src="../lib/GeoExt.js"></script>
+
+ <script type="text/javascript" src="tree-tools.js"></script>
+
+ <style type="text/css">
+ .gx-tree-layer-actions{
+ float: right;
+ }
+ .gx-tree-layer-action {
+ background-position: center center;
+ background-repeat: no-repeat;
+ border: 0 none;
+ height: 16px;
+ margin: 0;
+ padding: 0;
+ vertical-align: top;
+ width: 16px;
+ }
+ .gx-tree-layer-actions .delete {
+ background: transparent url(resources/img/delete.gif);
+ }
+ .gx-tree-layer-actions .up {
+ background: transparent url(resources/img/move_up.png);
+ }
+ .gx-tree-layer-actions .down {
+ background: transparent url(resources/img/move_down.png);
+ }
+ .gx-tree-layer-actions .tbar {
+ background: transparent url(resources/img/info.png);
+ }
+ .gx-toolbar {
+ background: none;
+ border-style: none;
+ left: 15;
+ }
+ .x-tree-node-collapsed .x-tree-node-icon, .x-tree-node-expanded .x-tree-node-icon, .x-tree-node-leaf .gx-tree-layer-icon {
+ width: 0px; !important;
+ }
+ </style>
+
+ </head>
+ <body>
+ <div id="desc">
+ <h1>GeoExt Tree Node UI</h1>
+
+ <p>This example shows how to add tools (actions) and components in
+ tree nodes. The tools added here allow moving the layers up and
+ down and deleting them. The component added for each node is a
+ toolbar including an opacity slider which acts on the node's
+ layer.</p>
+
+ <p>The js is not minified so it is readable. See
+ <a href="tree-tools.js">tree-tools.js</a>.</p>
+ </div>
+ </body>
+</html>
Modified: sandbox/camptocamp/geobretagne/examples/tree-tools.js
===================================================================
--- sandbox/camptocamp/geobretagne/examples/tree-tools.js 2009-09-01 05:52:36 UTC (rev 1344)
+++ sandbox/camptocamp/geobretagne/examples/tree-tools.js 2009-09-01 11:15:32 UTC (rev 1345)
@@ -205,3 +205,821 @@
}
});
});
+/**
+ * Copyright (c) 2008-2009 The Open Source Geospatial Foundation
+ *
+ * Published under the BSD license.
+ * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
+ * of the license.
+ */
+
+Ext.namespace("GeoExt.examples");
+
+// this function creates a toolbar with a layer opacity
+// slider and an information button, it is used to
+// configure the layer node ui to add a toolbar
+// for each node in the layer tree
+GeoExt.examples.tbar = function(node, ct) {
+ return new Ext.Toolbar({
+ cls: "gx-toolbar",
+ buttons: [new GeoExt.LayerOpacitySlider({
+ layer: node.layer,
+ aggressive: true,
+ plugins: new GeoExt.LayerOpacitySliderTip(),
+ width: 100
+ })]
+ });
+};
+
+// this function takes action based on the "action"
+// parameter, it is used as a listener to layer
+// nodes' "action" events
+GeoExt.examples.act = function(node, action, evt) {
+ var layer = node.layer;
+ switch(action) {
+ case "down":
+ layer.map.raiseLayer(layer, -1);
+ break;
+ case "up":
+ layer.map.raiseLayer(layer, +1);
+ break;
+ case "delete":
+ layer.destroy();
+ break;
+ }
+};
+
+// a custom layer node UI class, for use with the second tree (see below).
+GeoExt.examples.CustomLayerNodeUI = Ext.extend(GeoExt.tree.LayerNodeUI, {
+ actions: [{
+ action: "delete",
+ qtip: "delete"
+ }, {
+ action: "up",
+ qtip: "move up",
+ hide: function() {
+ // "this" references the tree node
+ var layer = this.layer, map = layer.map;
+ return map.getLayerIndex(layer) == map.layers.length - 1;
+ }
+ }, {
+ action: "down",
+ qtip: "move down",
+ hide: function() {
+ // "this" references the tree node
+ var layer = this.layer, map = layer.map;
+ return map.getLayerIndex(layer) == 1;
+ }
+ }],
+ component: GeoExt.examples.tbar
+});
+
+Ext.onReady(function() {
+ Ext.QuickTips.init();
+
+ // the map panel
+ var mapPanel = new GeoExt.MapPanel({
+ border: true,
+ region: "center",
+ center: [146.1569825, -41.6109735],
+ zoom: 6,
+ layers: [
+ new OpenLayers.Layer.WMS("Tasmania State Boundaries",
+ "http://demo.opengeo.org/geoserver/wms", {
+ layers: "topp:tasmania_state_boundaries"
+ }, {
+ buffer: 0,
+ // exclude this layer from layer container nodes
+ displayInLayerSwitcher: false
+ }),
+ new OpenLayers.Layer.WMS("Water",
+ "http://demo.opengeo.org/geoserver/wms", {
+ layers: "topp:tasmania_water_bodies",
+ transparent: true,
+ format: "image/gif"
+ }, {
+ buffer: 0
+ }),
+ new OpenLayers.Layer.WMS("Cities",
+ "http://demo.opengeo.org/geoserver/wms", {
+ layers: "topp:tasmania_cities",
+ transparent: true,
+ format: "image/gif"
+ }, {
+ buffer: 0
+ }),
+ new OpenLayers.Layer.WMS("Tasmania Roads",
+ "http://demo.opengeo.org/geoserver/wms", {
+ layers: "topp:tasmania_roads",
+ transparent: true,
+ format: "image/gif"
+ }, {
+ buffer: 0
+ })
+ ]
+ });
+
+ // the first layer tree panel. If this tree the node actions and
+ // component are set using the loader's "baseAttrs" property.
+ var tree1 = new Ext.tree.TreePanel({
+ border: true,
+ region: "center",
+ title: "Layer Tree 1",
+ split: true,
+ collapsible: true,
+ autoScroll: true,
+ loader: {
+ applyLoader: false
+ },
+ root: {
+ nodeType: "gx_layercontainer",
+ loader: {
+ baseAttrs: {
+ actions: [{
+ action: "delete",
+ qtip: "delete"
+ }, {
+ action: "up",
+ qtip: "move up"
+ }, {
+ action: "down",
+ qtip: "move down"
+ }],
+ checked: null,
+ component: GeoExt.examples.tbar
+ }
+ }
+ },
+ rootVisible: false,
+ lines: false,
+ listeners: {
+ action: GeoExt.examples.act
+ }
+ });
+
+ // the second layer tree panel. In this tree the CustomLayerNodeUI
+ // class is used for each node of the layer container.
+ var tree2 = new Ext.tree.TreePanel({
+ border: true,
+ region: "south",
+ height: 300,
+ title: "Layer Tree 2",
+ split: true,
+ collapsible: true,
+ autoScroll: true,
+ loader: {
+ applyLoader: false
+ },
+ root: {
+ nodeType: "gx_layercontainer",
+ loader: {
+ uiProviders: {
+ "ui": GeoExt.examples.CustomLayerNodeUI
+ },
+ baseAttrs: {
+ uiProvider: "ui"
+ }
+ }
+ },
+ rootVisible: false,
+ lines: false,
+ listeners: {
+ action: GeoExt.examples.act
+ }
+ });
+
+ // the viewport
+ new Ext.Viewport({
+ layout: "fit",
+ hideBorders: true,
+ items: {
+ layout: "border",
+ deferredRender: false,
+ items: [
+ mapPanel, {
+ region: "west",
+ width: 250,
+ layout: "border",
+ items: [
+ tree1,
+ tree2
+ ]
+ }, {
+ region: "east",
+ contentEl: "desc",
+ width: 250
+ }]
+ }
+ });
+});
+/**
+ * Copyright (c) 2008-2009 The Open Source Geospatial Foundation
+ *
+ * Published under the BSD license.
+ * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
+ * of the license.
+ */
+
+Ext.namespace("GeoExt.examples");
+
+// this function creates a toolbar with a layer opacity
+// slider and an information button, it is used to
+// configure the layer node ui to add a toolbar
+// for each node in the layer tree
+GeoExt.examples.tbar = function(node, ct) {
+ return new Ext.Toolbar({
+ cls: "gx-toolbar",
+ buttons: [new GeoExt.LayerOpacitySlider({
+ layer: node.layer,
+ aggressive: true,
+ plugins: new GeoExt.LayerOpacitySliderTip(),
+ width: 100
+ })]
+ });
+};
+
+// this function takes action based on the "action"
+// parameter, it is used as a listener to layer
+// nodes' "action" events
+GeoExt.examples.act = function(node, action, evt) {
+ var layer = node.layer;
+ switch(action) {
+ case "down":
+ layer.map.raiseLayer(layer, -1);
+ break;
+ case "up":
+ layer.map.raiseLayer(layer, +1);
+ break;
+ case "delete":
+ layer.destroy();
+ break;
+ }
+};
+
+// a custom layer node UI class, for use with the second tree (see below).
+GeoExt.examples.CustomLayerNodeUI = Ext.extend(GeoExt.tree.LayerNodeUI, {
+ actions: [{
+ action: "delete",
+ qtip: "delete"
+ }, {
+ action: "up",
+ qtip: "move up",
+ hide: function() {
+ // "this" references the tree node
+ var layer = this.layer, map = layer.map;
+ return map.getLayerIndex(layer) == map.layers.length - 1;
+ }
+ }, {
+ action: "down",
+ qtip: "move down",
+ hide: function() {
+ // "this" references the tree node
+ var layer = this.layer, map = layer.map;
+ return map.getLayerIndex(layer) == 1;
+ }
+ }],
+ component: GeoExt.examples.tbar
+});
+
+Ext.onReady(function() {
+ Ext.QuickTips.init();
+
+ // the map panel
+ var mapPanel = new GeoExt.MapPanel({
+ border: true,
+ region: "center",
+ center: [146.1569825, -41.6109735],
+ zoom: 6,
+ layers: [
+ new OpenLayers.Layer.WMS("Tasmania State Boundaries",
+ "http://demo.opengeo.org/geoserver/wms", {
+ layers: "topp:tasmania_state_boundaries"
+ }, {
+ buffer: 0,
+ // exclude this layer from layer container nodes
+ displayInLayerSwitcher: false
+ }),
+ new OpenLayers.Layer.WMS("Water",
+ "http://demo.opengeo.org/geoserver/wms", {
+ layers: "topp:tasmania_water_bodies",
+ transparent: true,
+ format: "image/gif"
+ }, {
+ buffer: 0
+ }),
+ new OpenLayers.Layer.WMS("Cities",
+ "http://demo.opengeo.org/geoserver/wms", {
+ layers: "topp:tasmania_cities",
+ transparent: true,
+ format: "image/gif"
+ }, {
+ buffer: 0
+ }),
+ new OpenLayers.Layer.WMS("Tasmania Roads",
+ "http://demo.opengeo.org/geoserver/wms", {
+ layers: "topp:tasmania_roads",
+ transparent: true,
+ format: "image/gif"
+ }, {
+ buffer: 0
+ })
+ ]
+ });
+
+ // the first layer tree panel. If this tree the node actions and
+ // component are set using the loader's "baseAttrs" property.
+ var tree1 = new Ext.tree.TreePanel({
+ border: true,
+ region: "center",
+ title: "Layer Tree 1",
+ split: true,
+ collapsible: true,
+ autoScroll: true,
+ loader: {
+ applyLoader: false
+ },
+ root: {
+ nodeType: "gx_layercontainer",
+ loader: {
+ baseAttrs: {
+ actions: [{
+ action: "delete",
+ qtip: "delete"
+ }, {
+ action: "up",
+ qtip: "move up"
+ }, {
+ action: "down",
+ qtip: "move down"
+ }],
+ checked: null,
+ component: GeoExt.examples.tbar
+ }
+ }
+ },
+ rootVisible: false,
+ lines: false,
+ listeners: {
+ action: GeoExt.examples.act
+ }
+ });
+
+ // the second layer tree panel. In this tree the CustomLayerNodeUI
+ // class is used for each node of the layer container.
+ var tree2 = new Ext.tree.TreePanel({
+ border: true,
+ region: "south",
+ height: 300,
+ title: "Layer Tree 2",
+ split: true,
+ collapsible: true,
+ autoScroll: true,
+ loader: {
+ applyLoader: false
+ },
+ root: {
+ nodeType: "gx_layercontainer",
+ loader: {
+ uiProviders: {
+ "ui": GeoExt.examples.CustomLayerNodeUI
+ },
+ baseAttrs: {
+ uiProvider: "ui"
+ }
+ }
+ },
+ rootVisible: false,
+ lines: false,
+ listeners: {
+ action: GeoExt.examples.act
+ }
+ });
+
+ // the viewport
+ new Ext.Viewport({
+ layout: "fit",
+ hideBorders: true,
+ items: {
+ layout: "border",
+ deferredRender: false,
+ items: [
+ mapPanel, {
+ region: "west",
+ width: 250,
+ layout: "border",
+ items: [
+ tree1,
+ tree2
+ ]
+ }, {
+ region: "east",
+ contentEl: "desc",
+ width: 250
+ }]
+ }
+ });
+});
+/**
+ * Copyright (c) 2008-2009 The Open Source Geospatial Foundation
+ *
+ * Published under the BSD license.
+ * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
+ * of the license.
+ */
+
+Ext.namespace("GeoExt.examples");
+
+// this function creates a toolbar with a layer opacity
+// slider and an information button, it is used to
+// configure the layer node ui to add a toolbar
+// for each node in the layer tree
+GeoExt.examples.tbar = function(node, ct) {
+ return new Ext.Toolbar({
+ cls: "gx-toolbar",
+ buttons: [new GeoExt.LayerOpacitySlider({
+ layer: node.layer,
+ aggressive: true,
+ plugins: new GeoExt.LayerOpacitySliderTip(),
+ width: 100
+ })]
+ });
+};
+
+// this function takes action based on the "action"
+// parameter, it is used as a listener to layer
+// nodes' "action" events
+GeoExt.examples.act = function(node, action, evt) {
+ var layer = node.layer;
+ switch(action) {
+ case "down":
+ layer.map.raiseLayer(layer, -1);
+ break;
+ case "up":
+ layer.map.raiseLayer(layer, +1);
+ break;
+ case "delete":
+ layer.destroy();
+ break;
+ }
+};
+
+// a custom layer node UI class, for use with the second tree (see below).
+GeoExt.examples.CustomLayerNodeUI = Ext.extend(GeoExt.tree.LayerNodeUI, {
+ actions: [{
+ action: "delete",
+ qtip: "delete"
+ }, {
+ action: "up",
+ qtip: "move up"
+ }, {
+ action: "down",
+ qtip: "move down"
+ }],
+ component: GeoExt.examples.tbar
+});
+
+Ext.onReady(function() {
+ Ext.QuickTips.init();
+
+ // the map panel
+ var mapPanel = new GeoExt.MapPanel({
+ border: true,
+ region: "center",
+ center: [146.1569825, -41.6109735],
+ zoom: 6,
+ layers: [
+ new OpenLayers.Layer.WMS("Tasmania State Boundaries",
+ "http://demo.opengeo.org/geoserver/wms", {
+ layers: "topp:tasmania_state_boundaries"
+ }, {
+ buffer: 0,
+ // exclude this layer from layer container nodes
+ displayInLayerSwitcher: false
+ }),
+ new OpenLayers.Layer.WMS("Water",
+ "http://demo.opengeo.org/geoserver/wms", {
+ layers: "topp:tasmania_water_bodies",
+ transparent: true,
+ format: "image/gif"
+ }, {
+ buffer: 0
+ }),
+ new OpenLayers.Layer.WMS("Cities",
+ "http://demo.opengeo.org/geoserver/wms", {
+ layers: "topp:tasmania_cities",
+ transparent: true,
+ format: "image/gif"
+ }, {
+ buffer: 0
+ }),
+ new OpenLayers.Layer.WMS("Tasmania Roads",
+ "http://demo.opengeo.org/geoserver/wms", {
+ layers: "topp:tasmania_roads",
+ transparent: true,
+ format: "image/gif"
+ }, {
+ buffer: 0
+ })
+ ]
+ });
+
+ // the first layer tree panel. If this tree the node actions and
+ // component are set using the loader's "baseAttrs" property.
+ var tree1 = new Ext.tree.TreePanel({
+ border: true,
+ region: "center",
+ title: "Layer Tree 1",
+ split: true,
+ collapsible: true,
+ autoScroll: true,
+ loader: {
+ applyLoader: false
+ },
+ root: {
+ nodeType: "gx_layercontainer",
+ loader: {
+ baseAttrs: {
+ actions: [{
+ action: "delete",
+ qtip: "delete"
+ }, {
+ action: "up",
+ qtip: "move up"
+ }, {
+ action: "down",
+ qtip: "move down"
+ }],
+ checked: null,
+ component: GeoExt.examples.tbar
+ }
+ }
+ },
+ rootVisible: false,
+ lines: false,
+ listeners: {
+ action: GeoExt.examples.act
+ }
+ });
+
+ // the second layer tree panel. In this tree the CustomLayerNodeUI
+ // class is used for each node of the layer container.
+ var tree2 = new Ext.tree.TreePanel({
+ border: true,
+ region: "south",
+ height: 300,
+ title: "Layer Tree 2",
+ split: true,
+ collapsible: true,
+ autoScroll: true,
+ loader: {
+ applyLoader: false
+ },
+ root: {
+ nodeType: "gx_layercontainer",
+ loader: {
+ uiProviders: {
+ "ui": GeoExt.examples.CustomLayerNodeUI
+ },
+ baseAttrs: {
+ uiProvider: "ui"
+ }
+ }
+ },
+ rootVisible: false,
+ lines: false,
+ listeners: {
+ action: GeoExt.examples.act
+ }
+ });
+
+ // the viewport
+ new Ext.Viewport({
+ layout: "fit",
+ hideBorders: true,
+ items: {
+ layout: "border",
+ deferredRender: false,
+ items: [
+ mapPanel, {
+ region: "west",
+ width: 250,
+ layout: "border",
+ items: [
+ tree1,
+ tree2
+ ]
+ }, {
+ region: "east",
+ contentEl: "desc",
+ width: 250
+ }]
+ }
+ });
+});
+/**
+ * Copyright (c) 2008-2009 The Open Source Geospatial Foundation
+ *
+ * Published under the BSD license.
+ * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
+ * of the license.
+ */
+
+Ext.namespace("GeoExt.examples");
+
+// this function creates a toolbar with a layer opacity
+// slider and an information button, it is used to
+// configure the layer node ui to add a toolbar
+// for each node in the layer tree
+GeoExt.examples.tbar = function(node, ct) {
+ return new Ext.Toolbar({
+ cls: "gx-toolbar",
+ buttons: [new GeoExt.LayerOpacitySlider({
+ layer: node.layer,
+ aggressive: true,
+ plugins: new GeoExt.LayerOpacitySliderTip(),
+ width: 100
+ })]
+ });
+};
+
+// this function takes action based on the "action"
+// parameter, it is used as a listener to layer
+// nodes' "action" events
+GeoExt.examples.act = function(node, action, evt) {
+ var layer = node.layer;
+ switch(action) {
+ case "down":
+ layer.map.raiseLayer(layer, -1);
+ break;
+ case "up":
+ layer.map.raiseLayer(layer, +1);
+ break;
+ case "delete":
+ layer.destroy();
+ break;
+ }
+};
+
+// a custom layer node UI class, for use with the second tree (see below).
+GeoExt.examples.CustomLayerNodeUI = Ext.extend(GeoExt.tree.LayerNodeUI, {
+ actions: [{
+ action: "delete",
+ qtip: "delete"
+ }, {
+ action: "up",
+ qtip: "move up",
+ hide: function() {
+ // "this" references the tree node
+ var layer = this.layer, map = layer.map;
+ return map.getLayerIndex(layer) == map.layers.length - 1;
+ }
+ }, {
+ action: "down",
+ qtip: "move down",
+ hide: function() {
+ // "this" references the tree node
+ var layer = this.layer, map = layer.map;
+ return map.getLayerIndex(layer) == 1;
+ }
+ }],
+ component: GeoExt.examples.tbar
+});
+
+Ext.onReady(function() {
+ Ext.QuickTips.init();
+
+ // the map panel
+ var mapPanel = new GeoExt.MapPanel({
+ border: true,
+ region: "center",
+ center: [146.1569825, -41.6109735],
+ zoom: 6,
+ layers: [
+ new OpenLayers.Layer.WMS("Tasmania State Boundaries",
+ "http://demo.opengeo.org/geoserver/wms", {
+ layers: "topp:tasmania_state_boundaries"
+ }, {
+ buffer: 0,
+ // exclude this layer from layer container nodes
+ displayInLayerSwitcher: false
+ }),
+ new OpenLayers.Layer.WMS("Water",
+ "http://demo.opengeo.org/geoserver/wms", {
+ layers: "topp:tasmania_water_bodies",
+ transparent: true,
+ format: "image/gif"
+ }, {
+ buffer: 0
+ }),
+ new OpenLayers.Layer.WMS("Cities",
+ "http://demo.opengeo.org/geoserver/wms", {
+ layers: "topp:tasmania_cities",
+ transparent: true,
+ format: "image/gif"
+ }, {
+ buffer: 0
+ }),
+ new OpenLayers.Layer.WMS("Tasmania Roads",
+ "http://demo.opengeo.org/geoserver/wms", {
+ layers: "topp:tasmania_roads",
+ transparent: true,
+ format: "image/gif"
+ }, {
+ buffer: 0
+ })
+ ]
+ });
+
+ // the first layer tree panel. If this tree the node actions and
+ // component are set using the loader's "baseAttrs" property.
+ var tree1 = new Ext.tree.TreePanel({
+ border: true,
+ region: "center",
+ title: "Layer Tree 1",
+ split: true,
+ collapsible: true,
+ autoScroll: true,
+ loader: {
+ applyLoader: false
+ },
+ root: {
+ nodeType: "gx_layercontainer",
+ loader: {
+ baseAttrs: {
+ actions: [{
+ action: "delete",
+ qtip: "delete"
+ }, {
+ action: "up",
+ qtip: "move up"
+ }, {
+ action: "down",
+ qtip: "move down"
+ }],
+ checked: null,
+ component: GeoExt.examples.tbar
+ }
+ }
+ },
+ rootVisible: false,
+ lines: false,
+ listeners: {
+ action: GeoExt.examples.act
+ }
+ });
+
+ // the second layer tree panel. In this tree the CustomLayerNodeUI
+ // class is used for each node of the layer container.
+ var tree2 = new Ext.tree.TreePanel({
+ border: true,
+ region: "south",
+ height: 300,
+ title: "Layer Tree 2",
+ split: true,
+ collapsible: true,
+ autoScroll: true,
+ loader: {
+ applyLoader: false
+ },
+ root: {
+ nodeType: "gx_layercontainer",
+ loader: {
+ uiProviders: {
+ "ui": GeoExt.examples.CustomLayerNodeUI
+ },
+ baseAttrs: {
+ uiProvider: "ui"
+ }
+ }
+ },
+ rootVisible: false,
+ lines: false,
+ listeners: {
+ action: GeoExt.examples.act
+ }
+ });
+
+ // the viewport
+ new Ext.Viewport({
+ layout: "fit",
+ hideBorders: true,
+ items: {
+ layout: "border",
+ deferredRender: false,
+ items: [
+ mapPanel, {
+ region: "west",
+ width: 250,
+ layout: "border",
+ items: [
+ tree1,
+ tree2
+ ]
+ }, {
+ region: "east",
+ contentEl: "desc",
+ width: 250
+ }]
+ }
+ });
+});
Modified: sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/tree/LayerNode.js
===================================================================
--- sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/tree/LayerNode.js 2009-09-01 05:52:36 UTC (rev 1344)
+++ sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/tree/LayerNode.js 2009-09-01 11:15:32 UTC (rev 1345)
@@ -80,7 +80,7 @@
html.concat(['</div>']);
Ext.DomHelper.insertFirst(this.elNode, html.join(""));
}
- this.updateActions(actions);
+ this.updateActions();
var component = attr.component || this.component;
if(component) {
@@ -127,15 +127,16 @@
},
/** private: method[updateActions]
- * Update the visibility of action images.
+ *
+ * Update the action images' visibility.
*/
- updateActions: function(actions) {
+ updateActions: function() {
var n = this.node;
- var actions = n.attributes.actions || this.actions;
+ var actions = n.attributes.actions || this.actions || [];
Ext.each(actions, function(a, index) {
var el = Ext.get(n.id + '_' + a.action);
- if(el) {
- if(typeof a.hide == "function" && a.hide.call(n)) {
+ if (el && typeof a.hide == "function") {
+ if (a.hide.call(n)) {
el.setVisibilityMode(Ext.Element.DISPLAY);
el.hide();
} else {
@@ -208,7 +209,7 @@
}
}
},
-
+
/** private: method[destroy]
*/
destroy: function() {
More information about the Commits
mailing list