[Commits] r2679 - in sandbox/gxm/geoext/gxm: . css examples img lib
commits at geoext.org
commits at geoext.org
Thu May 12 16:58:03 CEST 2011
Author: marcjansen
Date: 2011-05-12 16:58:03 +0200 (Thu, 12 May 2011)
New Revision: 2679
Added:
sandbox/gxm/geoext/gxm/css/
sandbox/gxm/geoext/gxm/css/gxm.css
sandbox/gxm/geoext/gxm/examples/simple.html
sandbox/gxm/geoext/gxm/img/
sandbox/gxm/geoext/gxm/img/check-round-green.png
sandbox/gxm/geoext/gxm/img/check-round-grey.png
sandbox/gxm/geoext/gxm/img/minus1.png
sandbox/gxm/geoext/gxm/lib/Button.js
sandbox/gxm/geoext/gxm/lib/LayerList.js
sandbox/gxm/geoext/gxm/lib/MapPanel.js
sandbox/gxm/geoext/gxm/lib/SegmentedButton.js
Log:
First steps
- far from being done
- lacks tests, examples and documentation
- the components still can be split up into more files
- see simple.html for first examples (commented lines)
Added: sandbox/gxm/geoext/gxm/css/gxm.css
===================================================================
--- sandbox/gxm/geoext/gxm/css/gxm.css (rev 0)
+++ sandbox/gxm/geoext/gxm/css/gxm.css 2011-05-12 14:58:03 UTC (rev 2679)
@@ -0,0 +1,25 @@
+img.minus {
+ -webkit-mask-image: url(../img/minus1.png);
+}
+
+
+.gxm-layer-item {
+ margin-left: 10px;
+ padding-top: 3px;
+}
+
+span.gxm-visible-layer-indicator,
+span.gxm-invisible-layer-indicator {
+ display: block;
+ float: left;
+ width: 25px;
+ height: 25px;
+ background-position: center center;
+ background-repeat: no-repeat;
+}
+span.gxm-visible-layer-indicator {
+ background-image: url(../img/check-round-green.png);
+}
+span.gxm-invisible-layer-indicator {
+ background-image: url(../img/check-round-grey.png);
+}
Added: sandbox/gxm/geoext/gxm/examples/simple.html
===================================================================
--- sandbox/gxm/geoext/gxm/examples/simple.html (rev 0)
+++ sandbox/gxm/geoext/gxm/examples/simple.html 2011-05-12 14:58:03 UTC (rev 2679)
@@ -0,0 +1,522 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <!--
+ <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ -->
+ <title>Example</title>
+ <link rel="stylesheet" href="../external/sencha-touch-1.1.0/resources/css/sencha-touch.css" type="text/css">
+ <link rel="stylesheet" href="../external/OpenLayers.r11966/theme/default/style.css" type="text/css">
+ <link rel="stylesheet" href="../css/gxm.css" type="text/css">
+ <script type="text/javascript" src="../external/sencha-touch-1.1.0/sencha-touch.js"></script>
+ <script type="text/javascript" src="../external/OpenLayers.r11966/lib/OpenLayers.js?mobile"></script>
+ <script type="text/javascript" src="../lib/MapPanel.js"></script>
+ <script type="text/javascript" src="../lib/Button.js"></script>
+ <script type="text/javascript" src="../lib/SegmentedButton.js"></script>
+ <script type="text/javascript" src="../lib/LayerList.js"></script>
+ <script type="text/javascript">
+ Ext.setup({
+ onReady: function(){
+ var map = new OpenLayers.Map({
+ allOverlays: true,
+ controls: []
+ });
+ var ol_wms = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
+ layers: "basic"
+ });
+
+ // map.addControl(new OpenLayers.Control.ZoomIn())
+
+ map.addLayers([ol_wms]);
+
+// map.events.register('zoomend', null, function(){
+// log('zoomend-event in the map');
+// });
+
+ // /* ------------------------------------------------------------------
+ // * Lazy loading of the mappanel
+ // * ...with an existing OpenLayers.Map-object
+ // * ------------------------------------------------------------------
+ // */
+ // var mapPanel = {
+ // xtype: 'gxm_mappanel',
+ // map: map
+ // };
+ // new Ext.Panel({
+ // fullscreen: true,
+ // items: [ mapPanel ]
+ // });
+
+ /* ------------------------------------------------------------------
+ * Loading through instanciation of SpatialPinch.MapPanel
+ * ...with an existing OpenLayers.Map-object
+ * ------------------------------------------------------------------
+ */
+ // var mapPanel = new GXM.MapPanel({
+ // map: map
+ // });
+ /* ------------------------------------------------------------------
+ * Loading through instanciation of SpatialPinch.MapPanel
+ * ...without an existing OpenLayers.Map-object
+ * ------------------------------------------------------------------
+ */
+ // var mapPanel = new GXM.MapPanel({
+ // layers: [
+ // ol_wms.clone()
+ // ]
+ // });
+ /* ------------------------------------------------------------------
+ * using the center-property
+ * ... as string
+ * ------------------------------------------------------------------
+ */
+ // var mapPanel = new GXM.MapPanel({
+ // layers: [
+ // ol_wms.clone()
+ // ],
+ // center: '7,51'
+ // });
+ /* ------------------------------------------------------------------
+ * using the center-property
+ * ... as array
+ * ------------------------------------------------------------------
+ */
+ // var mapPanel = new GXM.MapPanel({
+ // layers: [
+ // ol_wms.clone()
+ // ],
+ // center: [ 7, 51 ]
+ // });
+
+ // /* ------------------------------------------------------------------
+ // * using the extent-property
+ // * ... with a string
+ // * ------------------------------------------------------------------
+ // */
+ // var mapPanel = new GXM.MapPanel({
+ // layers: [
+ // ol_wms.clone()
+ // ],
+ // extent: '7,51,8,52'
+ // });
+
+
+ /* ------------------------------------------------------------------
+ * using the gxm button
+ * ... simple case with only one action (zoom in / out)
+ * ------------------------------------------------------------------
+ */
+// var zoomin = new OpenLayers.Control.ZoomIn();
+// var zoomout = new OpenLayers.Control.ZoomOut();
+//
+// var btnZoomIn = new GXM.Button({
+// control: zoomin,
+// map: map,
+// iconCls: 'add',
+// iconMask: true,
+// handler: function(){
+// Ext.Msg.alert('Zoom-In', 'Callback method');
+// }
+// });
+// var btnZoomOut = {
+// xtype: 'gxm_button',
+// control: zoomout,
+// map: map,
+// iconCls: 'minus',
+// iconMask: true,
+// handler: function(){
+// Ext.Msg.alert('Zoom-Out', 'Callback method');
+// }
+// };
+//
+// var mapPanel = new GXM.MapPanel({
+// dockedItems: [{
+// xtype: 'toolbar',
+// dock: 'top',
+// items: [btnZoomIn, btnZoomOut]
+// }],
+// map: map,
+// controls: [
+// new OpenLayers.Control.Navigation()
+// ],
+// center: [7, 51],
+// zoom: 7
+// });
+
+
+
+// /* ------------------------------------------------------------------
+// * using the gxm button
+// * ... more complicated: a kind of toggle button
+// * ------------------------------------------------------------------
+// */
+// var nav = new OpenLayers.Control.Navigation();
+//
+// var btnNavigation = {
+// xtype: 'segmentedbutton',
+// allowDepress: true,
+// items: [{
+// text: 'Navigation',
+// xtype: 'gxm_button',
+// map: map,
+// control: nav,
+// pressed: true,
+// handler: function(btn, evt, activeState){
+// Ext.Msg.alert('Navigation', 'Navigation is ' + (activeState ? 'active' : 'inactive') + '.');
+// }
+// }]
+// };
+//
+// var mapPanel = new GXM.MapPanel({
+// dockedItems: [{
+// xtype: 'toolbar',
+// dock: 'top',
+// items: [btnNavigation]
+// }],
+// map: map,
+// center: [7, 51],
+// zoom: 7
+// });
+
+
+// /* ------------------------------------------------------------------
+// * using the gxm buttons
+// * ... disabling / enabling inside group, the explicit way
+// * ------------------------------------------------------------------
+// */
+//
+//
+// // create a vector layer for drawing
+// var vector = new OpenLayers.Layer.Vector('Vector Layer', {
+// styleMap: new OpenLayers.StyleMap({
+// temporary: OpenLayers.Util.applyDefaults({
+// pointRadius: 16
+// }, OpenLayers.Feature.Vector.style.temporary)
+// })
+// });
+//
+// var ctrlDrawPoint = new OpenLayers.Control.DrawFeature(
+// vector,
+// OpenLayers.Handler.Point
+// );
+// var ctrlDrawLine = new OpenLayers.Control.DrawFeature(
+// vector,
+// OpenLayers.Handler.Path
+// );
+// var ctrlDrawPoly = new OpenLayers.Control.DrawFeature(
+// vector,
+// OpenLayers.Handler.Polygon
+// );
+//
+// var btnDigPoint = {
+// xtype: 'gxm_button',
+// control: ctrlDrawPoint,
+// map: map,
+// text: 'Point',
+// pressed: true,
+// exclusiveGroup: 'dig'
+// };
+// var btnDigLine = {
+// xtype: 'gxm_button',
+// control: ctrlDrawLine,
+// map: map,
+// text: 'Line' ,
+// exclusiveGroup: 'dig'
+// };
+// var btnDigPoly = {
+// xtype: 'gxm_button',
+// control: ctrlDrawPoly,
+// map: map,
+// text: 'Poly',
+// exclusiveGroup: 'dig'
+// };
+//
+// var digGroup = {
+// xtype: 'segmentedbutton',
+// items: [
+// btnDigPoint,
+// btnDigLine,
+// btnDigPoly
+// ]
+// };
+// var mapPanel = new GXM.MapPanel({
+// dockedItems: [{
+// xtype: 'toolbar',
+// dock: 'bottom',
+// items: [digGroup]
+// }],
+// map: map,
+// layers: vector,
+// center: [7, 51],
+// zoom: 7
+// });
+
+// /* ------------------------------------------------------------------
+// * using the gxm buttons
+// * ... disabling / enabling inside group, through the use of
+// * gxm_segmentedbutton
+// * ------------------------------------------------------------------
+// */
+//
+// // create a vector layer for drawing
+// var vector = new OpenLayers.Layer.Vector('Vector Layer', {
+// styleMap: new OpenLayers.StyleMap({
+// temporary: OpenLayers.Util.applyDefaults({
+// pointRadius: 16
+// }, OpenLayers.Feature.Vector.style.temporary)
+// })
+// });
+//
+// var ctrlDrawPoint = new OpenLayers.Control.DrawFeature(
+// vector,
+// OpenLayers.Handler.Point
+// );
+// var ctrlDrawLine = new OpenLayers.Control.DrawFeature(
+// vector,
+// OpenLayers.Handler.Path
+// );
+// var ctrlDrawPoly = new OpenLayers.Control.DrawFeature(
+// vector,
+// OpenLayers.Handler.Polygon
+// );
+//
+// var btnDigPoint = {
+// control: ctrlDrawPoint,
+// pressed: true,
+// text: 'Point'
+// };
+// var btnDigLine = {
+// control: ctrlDrawLine,
+// text: 'Line'
+// };
+// var btnDigPoly = {
+// control: ctrlDrawPoly,
+// text: 'Poly'
+// };
+//
+// var digGroup = {
+// xtype: 'gxm_segmentedbutton',
+// map: map,
+// items: [
+// btnDigPoint,
+// btnDigLine,
+// btnDigPoly
+// ]
+// };
+// var mapPanel = new GXM.MapPanel({
+// dockedItems: [{
+// xtype: 'toolbar',
+// dock: 'bottom',
+// items: [digGroup]
+// }],
+// map: map,
+// layers: vector,
+// center: [7, 51],
+// zoom: 7
+// });
+
+// /* ------------------------------------------------------------------
+// * using the gxm buttons
+// * ... combination example with different segmented buttons
+// * ------------------------------------------------------------------
+// */
+//
+// // create a vector layer for drawing
+// var vector = new OpenLayers.Layer.Vector('Vector Layer', {
+// styleMap: new OpenLayers.StyleMap({
+// temporary: OpenLayers.Util.applyDefaults({
+// pointRadius: 16
+// }, OpenLayers.Feature.Vector.style.temporary)
+// })
+// });
+//
+// var ctrlDrawPoint = new OpenLayers.Control.DrawFeature(
+// vector,
+// OpenLayers.Handler.Point
+// );
+// var ctrlDrawLine = new OpenLayers.Control.DrawFeature(
+// vector,
+// OpenLayers.Handler.Path
+// );
+// var ctrlDrawPoly = new OpenLayers.Control.DrawFeature(
+// vector,
+// OpenLayers.Handler.Polygon
+// );
+//
+// var btnDigPoint = {
+// control: ctrlDrawPoint,
+// text: 'Point'
+// };
+// var btnDigLine = {
+// control: ctrlDrawLine,
+// text: 'Line'
+// };
+// var btnDigPoly = {
+// control: ctrlDrawPoly,
+// text: 'Poly'
+// };
+//
+// var digGroup = {
+// xtype: 'gxm_segmentedbutton',
+// map: map,
+// exclusiveGroup: 'working-on-map',
+// items: [
+// btnDigPoint,
+// btnDigLine,
+// btnDigPoly
+// ]
+// };
+//
+// var nav = new OpenLayers.Control.Navigation();
+//
+// var btnNavigation = {
+// xtype: 'gxm_segmentedbutton',
+// exclusiveGroup: 'working-on-map',
+// map: map,
+// items: [{
+// text: 'Navigation',
+// control: nav,
+// pressed: true
+// }]
+// };
+//
+// var mapPanel = new GXM.MapPanel({
+// dockedItems: [{
+// xtype: 'toolbar',
+// dock: 'bottom',
+// items: [digGroup, {xtype: 'spacer'}, btnNavigation]
+// }],
+// map: map,
+// layers: vector,
+// center: [7, 51],
+// zoom: 7
+// });
+
+
+// /* ------------------------------------------------------------------
+// * using the gxm layerlist
+// * ... show / hide list on button click in overlay
+// * ------------------------------------------------------------------
+// */
+//
+// var btnLayerlist = {
+// xtype: 'button',
+// text: 'Layerlist',
+// handler: function(){
+// if (!this.popup) {
+// this.popup = new Ext.Panel({
+// floating: true,
+// modal: true,
+// centered: true,
+// hideOnMaskTap: true,
+// width: 240,
+// items: [{
+// xtype: 'gxm_layerlist',
+// map: map
+// }],
+// scroll: 'vertical'
+// });
+// }
+// this.popup.show('pop');
+// }
+// };
+//
+// var mapPanel = new GXM.MapPanel({
+// dockedItems: [{
+// xtype: 'toolbar',
+// dock: 'bottom',
+// items: [btnLayerlist]
+// }],
+// map: map,
+// controls: new OpenLayers.Control.Navigation(),
+// center: [7, 51],
+// zoom: 7
+// });
+
+
+ /* ------------------------------------------------------------------
+ * using the gxm layerlist
+ * ... show / hide list on button click in overlay
+ * ------------------------------------------------------------------
+ */
+
+ var btnLayerlist = {
+ xtype: 'button',
+ text: 'Layerlist',
+ handler: function(){
+ /*
+ if (!this.popup) {
+ this.popup = new Ext.Panel({
+ floating: true,
+ modal: true,
+ centered: true,
+ hideOnMaskTap: true,
+ width: 240,
+ items: [{
+ xtype: 'gxm_layerlist',
+ map: map
+ }],
+ scroll: 'vertical'
+ });
+ }
+ this.popup.show('pop');
+ */
+ vp.setActiveItem(1, 'slide');
+ }
+ };
+
+ var mapPanel = {
+ xtype: 'gxm_mappanel',
+ dockedItems: [{
+ xtype: 'toolbar',
+ dock: 'bottom',
+ items: [btnLayerlist]
+ }],
+ map: map,
+ controls: new OpenLayers.Control.Navigation(),
+ center: [7, 51],
+ zoom: 7
+ };
+ var layerList = {
+ xtype: 'gxm_layerlist',
+ map: map
+ };
+ var layerPanel = {
+ fullscreen: true,
+ items: [
+ layerList
+ ],
+ dockedItems: [{
+ xtype: 'toolbar',
+ dock: 'top',
+ items: [{
+ text: 'Back',
+ ui: 'back',
+ handler: function(){
+ vp.setActiveItem(0);
+ }
+ }]
+ }]
+ };
+
+ var vp = new Ext.Panel({
+ fullscreen: true,
+ layout: 'card',
+ items: [
+ mapPanel,
+ layerPanel
+ ]
+ });
+ vp.setActiveItem(0);
+ // DEBUG only
+ window.mapPanel = mapPanel;
+ window.map = mapPanel.map;
+ }
+ });
+ </script>
+ </head>
+ <body>
+ </body>
+</html>
Added: sandbox/gxm/geoext/gxm/img/check-round-green.png
===================================================================
(Binary files differ)
Property changes on: sandbox/gxm/geoext/gxm/img/check-round-green.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: sandbox/gxm/geoext/gxm/img/check-round-grey.png
===================================================================
(Binary files differ)
Property changes on: sandbox/gxm/geoext/gxm/img/check-round-grey.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: sandbox/gxm/geoext/gxm/img/minus1.png
===================================================================
(Binary files differ)
Property changes on: sandbox/gxm/geoext/gxm/img/minus1.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: sandbox/gxm/geoext/gxm/lib/Button.js
===================================================================
--- sandbox/gxm/geoext/gxm/lib/Button.js (rev 0)
+++ sandbox/gxm/geoext/gxm/lib/Button.js 2011-05-12 14:58:03 UTC (rev 2679)
@@ -0,0 +1,109 @@
+
+
+// toggle button via seg,mented button und allowDerpress
+
+// je nach OpenLayers.Control.TYPE_TOOL => segmented button
+
+// abstrakte wrapper klasse von component, die den TYPE der control überprüft
+// und entweder button / segmentedbutton zurückgibt
+
+// button / segmentedbutton eventuell nochmal ableiten als gxm_singlebutton / gxm_togglebutton
+
+Ext.ns('GXM');
+
+// usually a Ext.ComponentQuery.query('gxm_button[exclusiveGroup="humpty"]')
+// would be enough, but it seems as if we currently hav a bug in sencha:
+// http://www.sencha.com/forum/showthread.php?120633-Ext.ComponentQuery.query()-not-working
+GXM.buttonManager = new Ext.AbstractManager();
+
+
+
+
+
+GXM.Button = Ext.extend(Ext.Button, {
+ exclusiveGroup:null,
+ map: null,
+ uScope: null,
+ uHandler: null,
+ initComponent : function(){
+ GXM.Button.superclass.initComponent.call(this);
+
+ // register button for de/activating in exclusiveGroups
+ GXM.buttonManager.register(this);
+
+ // store the user scope and handlers
+ this.uScope = this.scope;
+ this.uHandler = this.handler;
+
+ this.scope = this;
+ this.handler = this.pHandler;
+
+ if (this.control) {
+ if (this.map && !this.control.map ) {
+ this.map.addControl(this.control);
+ if(this.pressed && this.control.map) {
+ this.control.activate();
+ }
+ this.control.events.on({
+ activate: this.onCtrlActivate,
+ deactivate: this.onCtrlDeactivate,
+ scope: this
+ });
+ }
+ }
+ },
+
+ pHandler: function(cmp) {
+ var ctrl = this.control;
+ if(ctrl &&
+ ctrl.type === OpenLayers.Control.TYPE_BUTTON) {
+ ctrl.trigger();
+ } else {
+ if ( this.pressed ) {
+ ctrl.activate();
+ } else {
+ ctrl.deactivate();
+ }
+ }
+ if(this.uHandler) {
+ // adding the controls active state as last arg for the callback
+ var args = Ext.toArray(arguments);
+ args.push(ctrl.active);
+ this.uHandler.apply(this.uScope, args);
+ }
+ },
+
+ getExclusiveGroupMembers: function() {
+ var members = [];
+ var myGroup = this.exclusiveGroup;
+ if (myGroup) {
+ GXM.buttonManager.each(function(id, btn) {
+ if(btn.exclusiveGroup === myGroup) {
+ members.push(btn);
+ }
+ });
+ }
+ return members;
+ },
+
+ onCtrlActivate: function(){
+ var exclusiveGroupMembers = this.getExclusiveGroupMembers();
+ var myId = this.id;
+ Ext.each(exclusiveGroupMembers, function(member) {
+ if (myId !== member.id) {
+ member.control.deactivate();
+ // we usually do not need to consider the visual apperance of
+ // buttons, but the members of our exclusive grop might be
+ // spread accross different gxm_segmentedbuttons
+ if (member.pressed) {
+ member.pressed = false;
+ member.removeCls(member.pressedCls);
+ }
+ }
+ });
+ },
+ onCtrlDeactivate: function(){
+ log( ' - onCtrlDeactivate');
+ }
+});
+Ext.reg('gxm_button', GXM.Button);
\ No newline at end of file
Added: sandbox/gxm/geoext/gxm/lib/LayerList.js
===================================================================
--- sandbox/gxm/geoext/gxm/lib/LayerList.js (rev 0)
+++ sandbox/gxm/geoext/gxm/lib/LayerList.js 2011-05-12 14:58:03 UTC (rev 2679)
@@ -0,0 +1,77 @@
+GXM.LayerList = Ext.extend(Ext.List, {
+
+ map: null,
+
+ createStore: function(){
+ Ext.regModel('Layer', {
+ fields: ['id', 'name', 'visibility', 'zindex']
+ });
+ var data = [];
+ Ext.each(this.map.layers, function(layer){
+ if (layer.displayInLayerSwitcher === true) {
+ var visibility = layer.isBaseLayer ? (this.map.baseLayer == layer) : layer.getVisibility();
+ data.push({
+ id: layer.id,
+ name: layer.name,
+ visibility: visibility,
+ zindex: layer.getZIndex()
+ });
+ }
+ });
+ return new Ext.data.Store({
+ model: 'Layer',
+ sorters: 'zindex',
+ data: data
+ });
+ },
+
+ initComponent: function(){
+ this.store = this.createStore();
+ this.itemTpl = new Ext.XTemplate(
+ '<tpl if="visibility">',
+ '<span class="gxm-visible-layer-indicator"></span>' ,
+ '</tpl>',
+ '<tpl if="!visibility">',
+ '<span class="gxm-invisible-layer-indicator"></span>' ,
+ '</tpl>',
+ '<span class="gxm-layer-item">{name}</span>'
+ );
+ this.listeners = {
+ itemtap: function(dataview, index, item, e){
+ var record = dataview.getStore().getAt(index);
+ var layer = this.map.getLayersBy("id", record.get("id"))[0];
+ if (layer.isBaseLayer) {
+ this.map.setBaseLayer(layer);
+ }
+ else {
+ layer.setVisibility(!layer.getVisibility());
+ }
+ record.set("visibility", layer.getVisibility());
+ }
+ };
+ this.map.events.on({
+ "changelayer": this.onChangeLayer,
+ scope: this
+ });
+ GXM.LayerList.superclass.initComponent.call(this);
+ },
+
+ findLayerRecord: function(layer){
+ var found;
+ this.store.each(function(record){
+ if (record.get("id") === layer.id) {
+ found = record;
+ }
+ }, this);
+ return found;
+ },
+
+ onChangeLayer: function(evt){
+ if (evt.property == "visibility") {
+ var record = this.findLayerRecord(evt.layer);
+ record.set("visibility", evt.layer.getVisibility());
+ }
+ }
+
+});
+Ext.reg('gxm_layerlist', GXM.LayerList);
Added: sandbox/gxm/geoext/gxm/lib/MapPanel.js
===================================================================
--- sandbox/gxm/geoext/gxm/lib/MapPanel.js (rev 0)
+++ sandbox/gxm/geoext/gxm/lib/MapPanel.js 2011-05-12 14:58:03 UTC (rev 2679)
@@ -0,0 +1,103 @@
+Ext.ns('GXM');
+
+//TODO: move this to a single file
+GXM = {
+ version: '0.0.1'
+};
+//TODO: remove eventually
+log = function(){
+ for (arg in arguments) {
+ console.log(arguments[arg]);
+ }
+};
+
+// mappanel
+GXM.MapPanel = Ext.extend(Ext.Panel, {
+ map: null,
+ //TODO: do we really wish to have this fullscreen?
+ //TODO: is this in any case a usefull default?
+ fullscreen: true,
+ initComponent: function(){
+ // check config-property map for an existing OpenLayers.Map-instance, a
+ // conf object for an OpenLayers.Map or null
+ if ( !(this.map instanceof OpenLayers.Map) ) {
+ var mapConf = Ext.applyIf(this.map || {}, {allOverlays: true});
+ this.map = new OpenLayers.Map(mapConf);
+ }
+ // this.map is now initialized in any case
+
+ // check config-property layers for any layers to be added to the map
+ //TODO: we might want to have a store of layers at this point
+ if ( this.layers ) {
+ // normalize the case where this.layers was not an array but a layer
+ if(this.layers instanceof OpenLayers.Layer) {
+ this.layers = [this.layers];
+ }
+ this.map.addLayers(this.layers);
+ }
+
+ // check config-property controls
+ if ( this.controls ) {
+ // normalize the case where this.controls was not an array but a control
+ if(this.controls instanceof OpenLayers.Control) {
+ this.controls = [this.controls];
+ }
+ this.map.addControls(this.controls);
+ }
+
+ // check config-property center
+ if ( Ext.isString(this.center) ) {
+ this.center = OpenLayers.LonLat.fromString(this.center);
+ } else if(Ext.isArray(this.center)) {
+ //TODO: this method does not exist. but IMO should
+ // this.center = OpenLayers.LonLat.fromArray(this.center);
+ this.center = new OpenLayers.LonLat(this.center[0], this.center[1]);
+ }
+
+ // check config-property bounds
+ if ( Ext.isString(this.extent) ) {
+ this.extent = OpenLayers.Bounds.fromString(this.extent);
+ } else if(Ext.isArray(this.extent)) {
+ this.extent = OpenLayers.Bounds.fromArray(this.extent);
+ }
+
+
+ GXM.MapPanel.superclass.initComponent.call(this);
+ },
+ afterRender: function(){
+ GXM.MapPanel.superclass.afterRender.apply(this, arguments);
+ if(!this.ownerCt) {
+ this.renderMap();
+ } else {
+ //TODO: check if we need this
+ this.ownerCt.on("move", this.updateMapSize, this);
+ this.ownerCt.on({
+ "afterlayout": {
+ fn: this.renderMap,
+ scope: this,
+ single: true
+ }
+ });
+ }
+ },
+ renderMap: function(){
+ var map = this.map;
+ map.render(this.body.dom);
+ if (this.center || this.zoom ) {
+ // center and/or zoom?
+ map.setCenter(this.center, this.zoom);
+ } else if (this.extent instanceof OpenLayers.Bounds) {
+ // extent
+ map.zoomToExtent(this.extent, true);
+ }else {
+ map.zoomToMaxExtent();
+ }
+ },
+ //TODO: check if we need this
+ updateMapSize: function() {
+ if(this.map) {
+ this.map.updateSize();
+ }
+ }
+});
+Ext.reg('gxm_mappanel', GXM.MapPanel);
Added: sandbox/gxm/geoext/gxm/lib/SegmentedButton.js
===================================================================
--- sandbox/gxm/geoext/gxm/lib/SegmentedButton.js (rev 0)
+++ sandbox/gxm/geoext/gxm/lib/SegmentedButton.js 2011-05-12 14:58:03 UTC (rev 2679)
@@ -0,0 +1,50 @@
+Ext.ns('GXM');
+GXM.SegmentedButton = Ext.extend(Ext.SegmentedButton, {
+ initComponent: function(){
+ // we need to adjust the defaults-property so that child elements
+ // (buttons) act as expected and all have the needed properties:
+ // - map => the same the segmented button belongs to
+ // - xtype => 'gxm_button'
+ // - exclusiveGroup (only needed sometimes, see below)
+
+ // if we were called with an exclusiveGroup-property, we guess that the
+ // user wants to disallowMultiple in any case:
+ if (this.exclusiveGroup) {
+ this.allowMultiple = false;
+ }
+
+ // initialize the soon to be default for child buttons
+ var exclusiveGroup;
+ // shall we act as an exclusive group of buttons?
+ if (!this.allowMultiple) {
+ // yes, do we already have a group name?
+ if(!this.exclusiveGroup) {
+ // no, generate_one
+ this.exclusiveGroup = Ext.id(null, "gxm-gen-exclusive-group");
+ }
+ exclusiveGroup = this.exclusiveGroup;
+ }
+
+ // this are the defaults for all child-buttons
+ var defaults = {
+ map: this.map,
+ xtype: 'gxm_button',
+ exclusiveGroup: exclusiveGroup
+ };
+
+ // apply to any supplied defaults when constructing this segmented
+ // button
+ var appliedDefaults = Ext.applyIf(this.defaults || {}, defaults);
+ this.defaults = appliedDefaults;
+
+ // if we only have one item, than this segmented button
+ // acts as if he was a toggleButton (like in Ext JS).
+ // to mimic this behaviour we simply allowDepress in that case:
+ if (this.items && this.items.length === 1) {
+ this.allowDepress = true;
+ }
+
+ GXM.SegmentedButton.superclass.initComponent.call(this);
+ }
+});
+Ext.reg('gxm_segmentedbutton', GXM.SegmentedButton);
\ No newline at end of file
More information about the Commits
mailing list