[Commits] r743 - in sandbox/elemoine/playground/geoext: examples lib lib/GeoExt
commits at geoext.org
commits at geoext.org
Thu May 14 22:40:35 CEST 2009
Author: elemoine
Date: 2009-05-14 22:40:35 +0200 (Thu, 14 May 2009)
New Revision: 743
Added:
sandbox/elemoine/playground/geoext/examples/toolbar.html
sandbox/elemoine/playground/geoext/examples/toolbar.js
sandbox/elemoine/playground/geoext/lib/GeoExt/Action.js
Modified:
sandbox/elemoine/playground/geoext/lib/GeoExt.js
Log:
wrap OpenLayers Controls in Ext Actions work
Added: sandbox/elemoine/playground/geoext/examples/toolbar.html
===================================================================
--- sandbox/elemoine/playground/geoext/examples/toolbar.html (rev 0)
+++ sandbox/elemoine/playground/geoext/examples/toolbar.html 2009-05-14 20:40:35 UTC (rev 743)
@@ -0,0 +1,31 @@
+<html>
+ <head>
+ <title>GeoExt Toolbar Example</title>
+
+ <!--<script type="text/javascript" src="http://extjs.cachefly.net/builds/ext-cdn-771.js"></script>-->
+ <script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
+ <script type="text/javascript" src="../../ext/ext-all.js"></script>
+ <link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css" />
+ <link rel="stylesheet" type="text/css" href="../../ext/examples/shared/examples.css"></link>
+ <!--<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 src="../../openlayers/lib/OpenLayers.js"></script>
+ <script type="text/javascript" src="../lib/GeoExt.js"></script>
+
+ <script type="text/javascript" src="toolbar.js"></script>
+
+ </head>
+ <body>
+ <h1>OpenLayers controls in an Ext toolbar</h1>
+
+ <p>This example shows how to add OpenLayers controls in an Ext toolbar.
+ GeoExt provides a the GeoExt.Action.wrap method that wraps a control
+ into an object that can be inserted in a toolbar or in a menu.</p>
+
+ <p>The js is not minified so it is readable. See <a
+ href="toolbar.js">toolbar.js</a>.</p>
+
+ <div id="mappanel"></div>
+ </body>
+</html>
Added: sandbox/elemoine/playground/geoext/examples/toolbar.js
===================================================================
--- sandbox/elemoine/playground/geoext/examples/toolbar.js (rev 0)
+++ sandbox/elemoine/playground/geoext/examples/toolbar.js 2009-05-14 20:40:35 UTC (rev 743)
@@ -0,0 +1,111 @@
+
+Ext.onReady(function() {
+ var map = new OpenLayers.Map();
+ var wms = new OpenLayers.Layer.WMS(
+ "bluemarble",
+ "http://sigma.openplans.org/geoserver/wms?",
+ {layers: 'bluemarble'}
+ );
+ var vector = new OpenLayers.Layer.Vector("vector");
+ map.addLayers([wms, vector]);
+
+ var ctrl, toolbarItems = [];
+
+ // ZoomToMaxExtent control, a "button" control
+ ctrl = new OpenLayers.Control.ZoomToMaxExtent();
+ map.addControl(ctrl);
+ toolbarItems.push(
+ GeoExt.Action.wrapControl(ctrl, {
+ text: "max extent"
+ })
+ );
+
+ // Navigation control and DrawFeature controls
+ // in the same toggle group
+ ctrl = new OpenLayers.Control.Navigation();
+ map.addControl(ctrl);
+ toolbarItems.push(
+ GeoExt.Action.wrapControl(ctrl, {
+ text: "nav",
+ // button options
+ toggleGroup: "draw",
+ allowDepress: false,
+ pressed: true,
+ // check item options
+ group: "draw",
+ checked: true
+ })
+ );
+ ctrl = new OpenLayers.Control.DrawFeature(
+ vector, OpenLayers.Handler.Polygon
+ );
+ map.addControl(ctrl);
+ toolbarItems.push(
+ GeoExt.Action.wrapControl(ctrl, {
+ text: "draw poly",
+ // button options
+ toggleGroup: "draw",
+ allowDepress: false,
+ // check item options
+ group: "draw"
+ })
+ );
+ ctrl = new OpenLayers.Control.DrawFeature(
+ vector, OpenLayers.Handler.Path
+ );
+ map.addControl(ctrl);
+ toolbarItems.push(
+ GeoExt.Action.wrapControl(ctrl, {
+ text: "draw line",
+ // button options
+ toggleGroup: "draw",
+ allowDepress: false,
+ // check item options
+ group: "draw"
+ })
+ );
+
+ // SelectFeature control, a "toggle" control
+ ctrl = new OpenLayers.Control.SelectFeature(vector, {
+ type: OpenLayers.Control.TYPE_TOGGLE,
+ hover: true
+ });
+ map.addControl(ctrl);
+ toolbarItems.push(
+ GeoExt.Action.wrapControl(ctrl, {
+ text: "select",
+ // button options
+ enableToggle: true
+ })
+ );
+
+ // Reuse the GeoExt.Action objects created above
+ // as menu items
+ toolbarItems.push({
+ text: "menu",
+ menu: new Ext.menu.Menu({
+ items: [
+ // ZoomToMaxExtent
+ toolbarItems[0],
+ // Nav
+ new Ext.menu.CheckItem(toolbarItems[1]),
+ // Draw poly
+ new Ext.menu.CheckItem(toolbarItems[2]),
+ // Draw line
+ new Ext.menu.CheckItem(toolbarItems[3]),
+ // Select control
+ new Ext.menu.CheckItem(toolbarItems[4])
+ ]
+ })
+ });
+
+ var mapPanel = new GeoExt.MapPanel({
+ renderTo: "mappanel",
+ height: 400,
+ width: 600,
+ map: map,
+ center: new OpenLayers.LonLat(5, 45),
+ zoom: 4,
+ tbar: toolbarItems
+ });
+});
Added: sandbox/elemoine/playground/geoext/lib/GeoExt/Action.js
===================================================================
--- sandbox/elemoine/playground/geoext/lib/GeoExt/Action.js (rev 0)
+++ sandbox/elemoine/playground/geoext/lib/GeoExt/Action.js 2009-05-14 20:40:35 UTC (rev 743)
@@ -0,0 +1,151 @@
+/* Copyright (C) 2008-2009 The Open Source Geospatial Foundation
+ * Published under the BSD license.
+ * See http://geoext.org/svn/geoext/core/trunk/license.txt for the full text
+ * of the license.
+ *
+ * pending approval */
+
+/** api: (define)
+ * module = GeoExt
+ * class = Action
+ * base_link = `Ext.Action <http://extjs.com/deploy/dev/docs/?class=Ext.Action>`_
+ */
+Ext.namespace("GeoExt");
+
+/** api: constructor
+ * .. class:: Action
+ *
+ * A record that represents an ``OpenLayers.Feature.Vector``. This record
+ * will always have at least the following fields:
+ *
+ * * feature ``OpenLayers.Feature.Vector``
+ * * state ``String``
+ * * fid ``String``
+ *
+ */
+
+GeoExt.Action = Ext.extend(Ext.Action, {
+
+ uHandler: null,
+
+ uScope: null,
+
+ uToggleHandler: null,
+
+ uCheckHandler: null,
+
+ control: null,
+
+ master: false,
+
+ constructor: function(config) {
+ // config highjack
+ this.uHandler = config.handler;
+ this.uScope = config.scope;
+ this.uToggleHandler = config.toggleHandler;
+ this.uCheckHandler = config.checkHandler;
+
+ config.scope = this;
+ config.handler = this.pHandler;
+ config.toggleHandler = this.pToggleHandler;
+ config.checkHandler = this.pCheckHandler;
+
+ // set control in the instance, the Ext.Action
+ // constructor won't do it for us
+ var ctrl = this.control = config.control;
+
+ // register "activate" and "deactivate" listeners
+ // on the control
+ if(ctrl) {
+ ctrl.events.on({
+ activate: this.onCtrlActivate,
+ deactivate: this.onCtrlDeactivate,
+ scope: this
+ });
+ }
+
+ arguments.callee.superclass.constructor.call(this, config);
+ },
+
+ pHandler: function(cmp) {
+ // cmp is the component that triggers this action
+ var ctrl = this.control;
+ if(ctrl &&
+ ctrl.type == OpenLayers.Control.TYPE_BUTTON) {
+ ctrl.trigger();
+ }
+ if(this.uHandler) {
+ this.uHandler.apply(this.uScope, arguments);
+ }
+ },
+
+ pToggleHandler: function(cmp, state) {
+ this.changeControlState(state);
+ if(this.uToggleHandler) {
+ this.uToggleHandler.apply(this.uScope, arguments);
+ }
+ },
+
+ pCheckHandler: function(cmp, state) {
+ this.changeControlState(state);
+ if(this.uCheckHandler) {
+ this.uCheckHandler.apply(this.uScope, arguments);
+ }
+ },
+
+ changeControlState: function(state) {
+ //this.master = true;
+ if(state) {
+ this.control.activate();
+ } else {
+ this.control.deactivate();
+ }
+ //this.master = false;
+ },
+
+ onCtrlActivate: function() {
+ //if(!this.master) {
+ var ctrl = this.control;
+ if(ctrl.type == OpenLayers.Control.TYPE_BUTTON) {
+ this.enable();
+ } else {
+ // deal with buttons
+ this.safeCallEach("toggle", [true]);
+ // deal with check items
+ this.safeCallEach("setChecked", [true]);
+ }
+ //}
+ },
+
+ onCtrlDeactivate: function() {
+ //if(!this.master) {
+ var ctrl = this.control;
+ if(ctrl.type == OpenLayers.Control.TYPE_BUTTON) {
+ this.disable();
+ } else {
+ // deal with buttons
+ this.safeCallEach("toggle", [false]);
+ // deal with check items
+ this.safeCallEach("setChecked", [false]);
+ }
+ //}
+ },
+
+ safeCallEach: function(fnName, args) {
+ var cs = this.items;
+ for(var i = 0, len = cs.length; i < len; i++){
+ if(cs[i][fnName]) {
+ cs[i][fnName].apply(cs[i], args);
+ }
+ }
+ }
+});
+
+GeoExt.Action.wrapControl = function(control, cfg) {
+ cfg = cfg || {};
+ if(cfg instanceof Ext.Action) {
+ cfg = cfg.initialConfig;
+ }
+ cfg.control = control;
+ return new GeoExt.Action(cfg);
+};
Modified: sandbox/elemoine/playground/geoext/lib/GeoExt.js
===================================================================
--- sandbox/elemoine/playground/geoext/lib/GeoExt.js 2009-05-14 20:34:46 UTC (rev 742)
+++ sandbox/elemoine/playground/geoext/lib/GeoExt.js 2009-05-14 20:40:35 UTC (rev 743)
@@ -58,6 +58,7 @@
*/
if(!singleFile) {
var jsfiles = new Array(
+ "GeoExt/Action.js",
"GeoExt/data/FeatureRecord.js",
"GeoExt/data/FeatureReader.js",
"GeoExt/data/FeatureStore.js",
More information about the Commits
mailing list