[Commits] r2693 - in sandbox/gxm/geoext/gxm: examples lib lib/data lib/data/model
commits at geoext.org
commits at geoext.org
Mon May 16 17:09:03 CEST 2011
Author: marcjansen
Date: 2011-05-16 17:09:03 +0200 (Mon, 16 May 2011)
New Revision: 2693
Added:
sandbox/gxm/geoext/gxm/examples/mappanel.html
sandbox/gxm/geoext/gxm/examples/mappanel.js
sandbox/gxm/geoext/gxm/lib/data/LayerReader.js
Modified:
sandbox/gxm/geoext/gxm/examples/simple.html
sandbox/gxm/geoext/gxm/lib/LayerList.js
sandbox/gxm/geoext/gxm/lib/MapPanel.js
sandbox/gxm/geoext/gxm/lib/data/LayerStore.js
sandbox/gxm/geoext/gxm/lib/data/model/Layer.js
Log:
added svn:external for OpenLayers trunk
Added: sandbox/gxm/geoext/gxm/examples/mappanel.html
===================================================================
--- sandbox/gxm/geoext/gxm/examples/mappanel.html (rev 0)
+++ sandbox/gxm/geoext/gxm/examples/mappanel.html 2011-05-16 15:09:03 UTC (rev 2693)
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+ <title>GXM: Examples of the GXM.MapPanel-class</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">
+ <style type="text/css">
+ pre.example-code {
+ font-weight: bold !important;
+ }
+ span.string {
+ color: darkgreen;
+ }
+ span.number {
+ color: darkblue;
+ }
+ span.comment {
+ color: #800080;
+ font-style: italic
+ }
+
+ </style>
+
+ <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/GXM.js"></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/data/model/Layer.js"></script>
+ <script type="text/javascript" src="../lib/data/LayerReader.js"></script>
+ <script type="text/javascript" src="../lib/data/LayerStore.js"></script>
+ <script type="text/javascript" src="../lib/LayerList.js"></script>
+
+ <script type="text/javascript" src="./mappanel.js"></script>
+ </head>
+ <body>
+ </body>
+</html>
\ No newline at end of file
Added: sandbox/gxm/geoext/gxm/examples/mappanel.js
===================================================================
--- sandbox/gxm/geoext/gxm/examples/mappanel.js (rev 0)
+++ sandbox/gxm/geoext/gxm/examples/mappanel.js 2011-05-16 15:09:03 UTC (rev 2693)
@@ -0,0 +1,163 @@
+//TODO: remove eventually
+log = function(){
+ if ( console && console.log ) {
+ for (arg in arguments) {
+ console.log(arguments[arg]);
+ }
+ }
+};
+
+var viewport;
+
+Ext.setup({
+ onReady: function(){
+ // OpenLayers specific
+ var map = new OpenLayers.Map();
+ var ol_wms = new OpenLayers.Layer.WMS(
+ "OpenLayers WMS",
+ "http://vmap0.tiles.osgeo.org/wms/vmap0",
+ {
+ layers: "basic"
+ }
+ );
+
+ map.addLayers([ol_wms]);
+
+ var strS = '<span class="string">';
+ var strE = '</span>';
+ var comS = '<span class="comment">';
+ var comE = '</span>';
+ var numS = '<span class="number">';
+ var numE = '</span>';
+
+ var ind = ' ';
+ var lazyMapPanel = {
+ xtype: 'gxm_mappanel',
+ map: map,
+ title: 'lazy w/ map',
+ sourceCode: [
+ '<pre class="example-code">',
+ '{',
+ ind + 'xtype : ' + strS + '"gxm_mappanel"' + strE + ',',
+ ind + comS + '// A reference to' + comE,
+ ind + comS + '// an OpenLayers.Map' + comE,
+ ind + 'map : map',
+ '}',
+ '</pre>'
+ ].join('<br>')
+ };
+
+ var lazyMapPanelLayers = {
+ xtype: 'gxm_mappanel',
+ layers: [
+ ol_wms.clone()
+ ],
+ title: 'lazy w/ layers',
+ sourceCode: [
+ '<pre class="example-code">',
+ '{',
+ ind + 'xtype : ' + strS + '"gxm_mappanel"' + strE + ',',
+ ind + 'layers : [',
+ ind + ind + comS + '// A reference to' + comE,
+ ind + ind + comS + '// an OpenLayers.Layer' + comE,
+ ind + ind + 'myLayer',
+ ind + ']',
+ '}',
+ '</pre>'
+ ].join('<br>')
+ };
+
+ var explicitMapPanelCenter = new GXM.MapPanel({
+ layers: [
+ ol_wms.clone()
+ ],
+ center: [
+ 8,
+ 51
+ ],
+ zoom: 11,
+ title: 'explicit w/ center',
+ sourceCode: [
+ '<pre class="example-code">',
+ 'new GXM.MapPanel( {',
+ ind + 'layers : [',
+ ind + ind + 'myLayer',
+ ind + '],',
+ ind + comS + '// pass as array, as string' + comE,
+ ind + comS + '// or OpenLayers.LonLat-instance' + comE,
+ ind + 'center : [',
+ ind + ind + numS + '8' + numE,
+ ind + ind + numS + '51' + numE,
+ ind + '],',
+ ind + comS + '// pass an integer as zoom' + comE,
+ ind + 'zoom : ' + numS + '11' + numE,
+ '} )',
+ '</pre>'
+ ].join('<br>')
+ });
+
+ var explicitMapPanelExtent = new GXM.MapPanel({
+ layers: [
+ ol_wms.clone()
+ ],
+ extent: '7,51,8,52',
+ title: 'explicit w/ extent',
+ sourceCode: [
+ '<pre class="example-code">',
+ 'new GXM.MapPanel( {',
+ ind + 'layers : [',
+ ind + ind + 'myLayer',
+ ind + '],',
+ ind + comS + '// pass as array, as string' + comE,
+ ind + comS + '// or OpenLayers.Bounds-instance' + comE,
+ ind + 'extent : ' + strS + '"7,51,8,52"' + strE,
+ '} )',
+ '</pre>'
+ ].join('<br>')
+ });
+
+
+ // general layout:
+ viewport = new Ext.TabPanel({
+ fullscreen: true,
+ ui: 'light',
+ tabBar: {
+ dock: 'top',
+ layout: {
+ pack: 'center'
+ }
+ },
+ items: [
+ lazyMapPanel,
+ lazyMapPanelLayers,
+ explicitMapPanelCenter,
+ explicitMapPanelExtent
+ ],
+ dockedItems: [
+ {
+ xtype: 'toolbar',
+ items: {
+ xtype: 'button',
+ text: 'Source',
+ handler: function() {
+ var overlay = new Ext.Panel({
+ floating: true,
+ modal: true,
+ centered: false,
+ width: Ext.is.Phone ? 260 : 400,
+ height: Ext.is.Phone ? 220 : 400,
+ styleHtmlContent: true,
+ scroll: 'vertical',
+ html: viewport.getActiveItem().sourceCode,
+ cls: 'htmlcontent'
+ });
+ overlay.showBy(this);
+ }
+ },
+ dock: 'bottom'
+ }
+
+ ]
+ });
+ }
+});
\ No newline at end of file
Modified: sandbox/gxm/geoext/gxm/examples/simple.html
===================================================================
--- sandbox/gxm/geoext/gxm/examples/simple.html 2011-05-16 13:49:10 UTC (rev 2692)
+++ sandbox/gxm/geoext/gxm/examples/simple.html 2011-05-16 15:09:03 UTC (rev 2693)
@@ -18,6 +18,7 @@
<script type="text/javascript" src="../lib/Button.js"></script>
<script type="text/javascript" src="../lib/SegmentedButton.js"></script>
<script type="text/javascript" src="../lib/data/model/Layer.js"></script>
+ <script type="text/javascript" src="../lib/data/LayerReader.js"></script>
<script type="text/javascript" src="../lib/data/LayerStore.js"></script>
<script type="text/javascript" src="../lib/LayerList.js"></script>
@@ -463,8 +464,7 @@
}
};
- var mapPanel = {
- xtype: 'gxm_mappanel',
+ var mapPanel = new GXM.MapPanel({
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
@@ -474,10 +474,19 @@
controls: new OpenLayers.Control.Navigation(),
center: [7, 51],
zoom: 7
- };
+ });
var layerList = {
- xtype: 'gxm_layerlist',
- map: map
+ xtype: 'gxm_layerlist',
+ // call with mapPanel...
+ // mapPanel: mapPanel
+ // ... or with layers and map
+ layers: mapPanel.layers,
+ map: map,
+ listeners: {
+ itemtap: function() {
+ Ext.Msg.alert('Application event "itemtap"', 'You can still register events as usual.');
+ }
+ }
};
var layerPanel = {
fullscreen: true,
Modified: sandbox/gxm/geoext/gxm/lib/LayerList.js
===================================================================
--- sandbox/gxm/geoext/gxm/lib/LayerList.js 2011-05-16 13:49:10 UTC (rev 2692)
+++ sandbox/gxm/geoext/gxm/lib/LayerList.js 2011-05-16 15:09:03 UTC (rev 2693)
@@ -7,74 +7,70 @@
GXM.LayerList = Ext.extend(Ext.List, {
+ layers: null,
+
+ mapPanel: null,
+
map: null,
- createStore: function(){
- 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: 'gxm_Layer',
- sorters: 'zindex',
- data: data
- });
+ onItemTap: function(item, index, e){
+ var record = this.getStore().getAt(index);
+ var layer = record.get('layer');
+ if (layer.isBaseLayer) {
+ this.map.setBaseLayer(layer);
+ }
+ else {
+ layer.setVisibility(!layer.getVisibility());
+ }
+ this.refresh();
+ GXM.LayerList.superclass.onItemTap.call(this, arguments);
},
initComponent: function(){
- this.store = this.createStore();
+
+ if (this.mapPanel && this.mapPanel instanceof GXM.MapPanel) {
+ this.map = this.mapPanel.map;
+ this.store = this.mapPanel.layers;
+ } else {
+ this.store = this.layers || this.store;
+ }
+
+ //TODO: or only one if that returns correct CSS-class?
this.itemTpl = new Ext.XTemplate(
- '<tpl if="visibility">',
+ '<tpl if="this.isVisible(layer)">',
'<span class="gxm-visible-layer-indicator"></span>' ,
'</tpl>',
- '<tpl if="!visibility">',
+ '<tpl if="!this.isVisible(layer)">',
'<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);
+ '<span class="gxm-layer-item">{name}</span>',
+ {
+ // template member functions
+ isVisible: function(layer) {
+ var visible = false;
+ //TODO: test
+ if (layer.isBaseLayer && layer.map.baseLayer === layer) {
+ visible = true;
+ } else {
+ visible = !!layer.getVisibility();
+ }
+ return visible;
}
- else {
- layer.setVisibility(!layer.getVisibility());
- }
- record.set("visibility", layer.getVisibility());
}
- };
- this.map.events.on({
- "changelayer": this.onChangeLayer,
- scope: this
- });
+ );
+
+ if (this.map) {
+ 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());
- }
+ this.refresh();
}
});
Modified: sandbox/gxm/geoext/gxm/lib/MapPanel.js
===================================================================
--- sandbox/gxm/geoext/gxm/lib/MapPanel.js 2011-05-16 13:49:10 UTC (rev 2692)
+++ sandbox/gxm/geoext/gxm/lib/MapPanel.js 2011-05-16 15:09:03 UTC (rev 2693)
@@ -16,7 +16,6 @@
// 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) {
@@ -25,25 +24,11 @@
this.map.addLayers(this.layers);
}
-// // temp:
-// var s = new GXM.data.LayerStore({
-// data:this.map,
-// proxy: {
-// type: 'memory',
-// reader: {
-// type: 'json',
-// root: 'layers'
-// }
-// }
-// });
-// log(s);
-// new Ext.data.Store({
-// model: 'gxm_Layer',
-// sorters: 'zindex',
-// data: data
-// });
-//
+ // create a layerstore with the current maps layers
+ this.layers = new GXM.data.LayerStore({
+ data: this.map.layers
+ });
// check config-property controls
if ( this.controls ) {
@@ -70,7 +55,6 @@
this.extent = OpenLayers.Bounds.fromArray(this.extent);
}
-
GXM.MapPanel.superclass.initComponent.call(this);
},
afterRender: function(){
Added: sandbox/gxm/geoext/gxm/lib/data/LayerReader.js
===================================================================
--- sandbox/gxm/geoext/gxm/lib/data/LayerReader.js (rev 0)
+++ sandbox/gxm/geoext/gxm/lib/data/LayerReader.js 2011-05-16 15:09:03 UTC (rev 2693)
@@ -0,0 +1,21 @@
+Ext.ns("GXM.data");
+
+GXM.data.LayerReader = Ext.extend(Ext.data.JsonReader, {
+ root: '',
+ readRecords: function(layers) {
+ var recs = GXM.data.LayerReader.superclass.readRecords.call(this, layers);
+
+ //TODO: Discuss whether we can copy and adjust the contents of GXM.data.LayerReader.superclass.readRecords so we do not need to iterate twice over the records
+ Ext.each(recs.records, function(record, index) {
+ if ( Ext.isDefined(record.data) && Ext.isDefined(record.data.layer)) {
+ record.data.layer = record.raw;
+ }
+ });
+
+ return recs;
+ }
+
+});
+
+
+
Modified: sandbox/gxm/geoext/gxm/lib/data/LayerStore.js
===================================================================
--- sandbox/gxm/geoext/gxm/lib/data/LayerStore.js 2011-05-16 13:49:10 UTC (rev 2692)
+++ sandbox/gxm/geoext/gxm/lib/data/LayerStore.js 2011-05-16 15:09:03 UTC (rev 2693)
@@ -1,7 +1,18 @@
Ext.ns("GXM.data");
GXM.data.LayerStore = Ext.extend(Ext.data.Store, {
- model: 'gxm_Layer'
+ constructor: function(config) {
+ var conf = config || {};
+
+ conf.model = conf.model || 'gxm_Layer';
+
+ conf.proxy = conf.proxy || {
+ type: 'memory',
+ reader: new GXM.data.LayerReader({})
+ };
+
+ return GXM.data.LayerStore.superclass.constructor.call(this, conf);
+ }
});
Ext.reg('gxm_layerstore', GXM.data.LayerStore);
Modified: sandbox/gxm/geoext/gxm/lib/data/model/Layer.js
===================================================================
--- sandbox/gxm/geoext/gxm/lib/data/model/Layer.js 2011-05-16 13:49:10 UTC (rev 2692)
+++ sandbox/gxm/geoext/gxm/lib/data/model/Layer.js 2011-05-16 15:09:03 UTC (rev 2693)
@@ -1,3 +1,12 @@
Ext.regModel('gxm_Layer', {
- fields: ['id', 'name', 'visibility', 'zindex']
+ fields: [
+ {
+ // The name given for the layer
+ name: 'name'
+ },
+ {
+ // The layer instance
+ name: 'layer'
+ }
+ ]
});
\ No newline at end of file
More information about the Commits
mailing list