[Commits] r1677 - in sandbox/cmoullet/ux: . ToolbarItems ToolbarItems/examples ToolbarItems/ux ToolbarItems/ux/widgets
commits at geoext.org
commits at geoext.org
Fri Jan 8 23:14:24 CET 2010
Author: cmoullet
Date: 2010-01-08 23:14:24 +0100 (Fri, 08 Jan 2010)
New Revision: 1677
Added:
sandbox/cmoullet/ux/ToolbarItems/
sandbox/cmoullet/ux/ToolbarItems/examples/
sandbox/cmoullet/ux/ToolbarItems/examples/ToolbarItemsExample.html
sandbox/cmoullet/ux/ToolbarItems/examples/ToolbarItemsExample.js
sandbox/cmoullet/ux/ToolbarItems/tests/
sandbox/cmoullet/ux/ToolbarItems/ux/
sandbox/cmoullet/ux/ToolbarItems/ux/widgets/
sandbox/cmoullet/ux/ToolbarItems/ux/widgets/LoadingStatusBar.js
sandbox/cmoullet/ux/ToolbarItems/ux/widgets/MousePositionItem.js
Log:
New UX: LoadingStatusBar and MousePositionItem
Added: sandbox/cmoullet/ux/ToolbarItems/examples/ToolbarItemsExample.html
===================================================================
--- sandbox/cmoullet/ux/ToolbarItems/examples/ToolbarItemsExample.html (rev 0)
+++ sandbox/cmoullet/ux/ToolbarItems/examples/ToolbarItemsExample.html 2010-01-08 22:14:24 UTC (rev 1677)
@@ -0,0 +1,24 @@
+<html>
+ <head>
+ <title>Toolbar Items Example</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="http://openlayers.org/api/2.8/OpenLayers.js"></script>
+ <script type="text/javascript" src="../../../trunk/geoext/lib/GeoExt.js"></script>
+ <script type="text/javascript" src="../ux/widgets/LoadingStatusBar.js"></script>
+ <script type="text/javascript" src="../ux/widgets/MousePositionItem.js"></script>
+ <script type="text/javascript" src="ToolbarItemsExample.js"></script>
+
+
+ </head>
+ <body>
+ <h1>Scale selector</h1>
+ <p>This example demonstrates the following toolbar items:<p>
+ <p>- loading status<p>
+ <p>- mouse position<p>
+ <p>The js is not minified so it is readable. See <a href="ToolbarItemsExample.js">ToolbarItemsExample.js</a>.</p>
+ <div id="mappanel"></div>
+ </body>
+</html>
Added: sandbox/cmoullet/ux/ToolbarItems/examples/ToolbarItemsExample.js
===================================================================
--- sandbox/cmoullet/ux/ToolbarItems/examples/ToolbarItemsExample.js (rev 0)
+++ sandbox/cmoullet/ux/ToolbarItems/examples/ToolbarItemsExample.js 2010-01-08 22:14:24 UTC (rev 1677)
@@ -0,0 +1,43 @@
+/**
+ * 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.
+ */
+
+/** api: example[ToolbarItems]
+ * Toolbar items
+ * ---------------------
+ * Items to be placed in a toolbare
+ */
+
+var mapPanel;
+
+Ext.onReady(function() {
+ var map = new OpenLayers.Map();
+ var layer = new OpenLayers.Layer.OSM("OSM");
+ map.addLayer(layer);
+
+ var loadingStatusBar = new GeoExt.ux.LoadingStatusBar({
+ map: map
+ });
+
+ var mousePositionItem = new GeoExt.ux.Toolbar.MousePositionItem({
+ map: map,
+ controlOptions: {
+ prefix: 'Coord: ',
+ numDigits: 0
+ }
+ });
+
+ mapPanel = new GeoExt.MapPanel({
+ title: "GeoExt MapPanel with Scale Selector",
+ renderTo: "mappanel",
+ height: 400,
+ width: 600,
+ map: map,
+ tbar: [mousePositionItem],
+ bbar: loadingStatusBar
+ });
+});
\ No newline at end of file
Added: sandbox/cmoullet/ux/ToolbarItems/ux/widgets/LoadingStatusBar.js
===================================================================
--- sandbox/cmoullet/ux/ToolbarItems/ux/widgets/LoadingStatusBar.js (rev 0)
+++ sandbox/cmoullet/ux/ToolbarItems/ux/widgets/LoadingStatusBar.js 2010-01-08 22:14:24 UTC (rev 1677)
@@ -0,0 +1,118 @@
+/**
+ * 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.
+ */
+
+/** api: (define)
+ * module = GeoExt.ux
+ * class = LoadingStatusBar
+ * base_link = `Ext.StatusBar <http://extjs.com/deploy/dev/docs/?class=Ext.StatusBar>`_
+ */
+Ext.namespace("GeoExt.ux");
+
+GeoExt.ux.LoadingStatusBar = Ext.extend(Ext.StatusBar, {
+
+ /** api: config[map]
+ * ``OpenLayers.Map`` or :class:`GeoExt.MapPanel`
+ */
+ map: null,
+
+ /** private: property[counter]
+ * ``Integer``
+ */
+ counter: 0,
+
+
+ /** private: method[constructor]
+ * Construct the component.
+ */
+ constructor: function(config) {
+ if (config.map && config.map instanceof GeoExt.MapPanel) {
+ config.map = config.map.map;
+ }
+ GeoExt.ux.LoadingStatusBar.superclass.constructor.call(this, config);
+ },
+
+ /** private: method[initComponent]
+ * Initialize the component.
+ */
+ initComponent: function() {
+ GeoExt.ux.LoadingStatusBar.superclass.initComponent.call(this);
+ this.bind();
+ this.on("beforedestroy", this.unbind, this);
+ },
+
+ /** private: method[bind]
+ */
+ bind: function() {
+ if (this.map) {
+ this.map.events.on({
+ preaddlayer: this.registerLayer,
+ removelayer: this.unregisterLayer,
+ scope: this
+ });
+ for (var i = 0, len = this.map.layers.length; i < len; i++) {
+ this.registerLayer(this.map.layers[i]);
+ }
+ }
+ },
+
+ /** private: method[unbind]
+ */
+ unbind: function() {
+ if (this.map) {
+ this.map.events.un({
+ preaddlayer: this.registerLayer,
+ removelayer: this.unregisterLayer,
+ scope: this
+ });
+ for (var i = 0, len = this.map.layers.length; i < len; i++) {
+ this.unregisterLayer(this.map.layers[i]);
+ }
+ }
+ },
+
+ /** private: method[increaseCounter]
+ */
+ increaseCounter: function(evt) {
+ this.counter++;
+ this.showBusy();
+ },
+
+ /** private: method[decreaseCounter]
+ */
+ decreaseCounter: function(evt) {
+ this.counter--;
+ if (this.counter == 0) {
+ this.clearStatus();
+ }
+ },
+
+ /** private: method[registerLayer]
+ * :param layer: ``OpenLayers.Layer``
+ */
+ registerLayer: function(layer) {
+ layer.events.on({
+ loadstart: this.increaseCounter,
+ loadend: this.decreaseCounter,
+ scope: this
+ });
+ },
+
+ /** private: method[unregisterLayer]
+ * :param layer: ``OpenLayers.Layer``
+ */
+ unregisterLayer: function(layer) {
+ layer.events.un({
+ loadstart: this.increaseCounter,
+ loadend: this.decreaseCounter,
+ scope: this
+ });
+ }
+});
+
+/** api: xtype = gxux_loadingstatus */
+Ext.reg('gxux_loadingstatus', GeoExt.ux.LoadingStatusBar);
Added: sandbox/cmoullet/ux/ToolbarItems/ux/widgets/MousePositionItem.js
===================================================================
--- sandbox/cmoullet/ux/ToolbarItems/ux/widgets/MousePositionItem.js (rev 0)
+++ sandbox/cmoullet/ux/ToolbarItems/ux/widgets/MousePositionItem.js 2010-01-08 22:14:24 UTC (rev 1677)
@@ -0,0 +1,34 @@
+/**
+ * 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.
+ */
+
+/** api: (define)
+ * module = GeoExt.ux
+ * class = Mouse Position bar item
+ * base_link = `Ext.Toolbar.TextItem <http://extjs.com/deploy/dev/docs/?class=Ext.Toolbar.TextItem>`_
+ */
+
+Ext.namespace("GeoExt.ux.Toolbar");
+
+GeoExt.ux.Toolbar.MousePositionItem = Ext.extend(Ext.Toolbar.TextItem, {
+
+ constructor: function(config) {
+ this.map = config.map || null;
+ this.controlOptions = config.controlOptions || {};
+ GeoExt.ux.Toolbar.MousePositionItem.superclass.constructor.call(this, this.text || "");
+ },
+
+ render: function(td) {
+ var config = OpenLayers.Util.extend(this.controlOptions, {
+ div:this.el
+ });
+ this.control = new OpenLayers.Control.MousePosition(config);
+ this.map.addControl(this.control);
+ GeoExt.ux.Toolbar.MousePositionItem.superclass.render.call(this, td);
+ }
+});
+
More information about the Commits
mailing list