[OpenLayers-Commits] r11390 -
sandbox/bartvde/sencha/openlayers/examples
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Thu Feb 24 05:08:20 EST 2011
Author: bartvde
Date: 2011-02-24 02:08:20 -0800 (Thu, 24 Feb 2011)
New Revision: 11390
Modified:
sandbox/bartvde/sencha/openlayers/examples/mobile-sencha.html
sandbox/bartvde/sencha/openlayers/examples/mobile-sencha.js
Log:
adding the search from Marc Jansen
Modified: sandbox/bartvde/sencha/openlayers/examples/mobile-sencha.html
===================================================================
--- sandbox/bartvde/sencha/openlayers/examples/mobile-sencha.html 2011-02-24 10:05:49 UTC (rev 11389)
+++ sandbox/bartvde/sencha/openlayers/examples/mobile-sencha.html 2011-02-24 10:08:20 UTC (rev 11390)
@@ -52,7 +52,17 @@
},
items: [{
iconCls: "search",
- iconMask: true
+ iconMask: true,
+ handler: function(){
+ // this is the app
+ if (!this.searchFormPopupPanel) {
+ this.searchFormPopupPanel = new GeoExt.SearchFormPopupPanel({
+ map: map
+ });
+ }
+ this.searchFormPopupPanel.show('pop');
+ },
+ scope: app
}, {
iconCls: "locate",
iconMask: true,
Modified: sandbox/bartvde/sencha/openlayers/examples/mobile-sencha.js
===================================================================
--- sandbox/bartvde/sencha/openlayers/examples/mobile-sencha.js 2011-02-24 10:05:49 UTC (rev 11389)
+++ sandbox/bartvde/sencha/openlayers/examples/mobile-sencha.js 2011-02-24 10:08:20 UTC (rev 11390)
@@ -1,18 +1,118 @@
Ext.ns('GeoExt');
+Ext.regModel('Geonames', {
+ fields: ['countryName', 'toponymName', 'name', 'lat', 'lng']
+});
+
+GeoExt.SearchFormPopupPanel = Ext.extend(Ext.Panel, {
+ map: null,
+ floating: true,
+ modal: true,
+ centered: true,
+ hideOnMaskTap: true,
+ width: Ext.is.Phone ? undefined : 400,
+ height: Ext.is.Phone ? undefined : 400,
+ scroll: false,
+ layout: 'fit',
+ fullscreen: Ext.is.Phone ? true : undefined,
+ url: 'http://ws.geonames.org/searchJSON?',
+ errorText: 'Sorry, we had problems communicating with geonames.org. Please try again.',
+ errorTitle: 'Communication error',
+ maxResults: 6,
+ featureClass: "P",
+ createStore: function() {
+ this.store = new Ext.data.Store({
+ model: 'Geonames',
+ proxy: {
+ type: 'scripttag',
+ timeout: 5000,
+ listeners: {
+ exception: function() {
+ Ext.Msg.alert(this.errorTitle, this.errorText, Ext.emptyFn);
+ },
+ scope: this
+ },
+ url: this.url,
+ reader: {
+ type: 'json',
+ root: 'geonames'
+ }
+ }
+ });
+ },
+ doSearch: function(searchfield, evt){
+ var q = searchfield.getValue();
+ if (q.length > 3) {
+ this.store.load({
+ params: {
+ featureClass: this.featureClass,
+ maxRows: this.maxResults,
+ name_startsWith: encodeURIComponent(q)
+ }
+ });
+ }
+ },
+ onItemTap: function(dataView, index, item, event){
+ var record = this.store.getAt(index);
+ var lon = record.get('lng');
+ var lat = record.get('lat');
+ var ll = new OpenLayers.LonLat(lon, lat);
+ var center = ll.transform(new OpenLayers.Projection('EPSG:4326'),
+ this.map.getProjectionObject());
+ this.map.setCenter(center);
+ this.hide("pop");
+ },
+ initComponent: function() {
+ this.createStore();
+ this.resultList = new Ext.List({
+ scroll: 'vertical',
+ store: this.store,
+ itemTpl: '<div>{name} ({countryName})</div>',
+ listeners: {
+ itemtap: this.onItemTap,
+ scope: this
+ }
+ });
+ this.formContainer = new Ext.form.FormPanel({
+ scroll: false,
+ items: [{
+ xtype: 'fieldset',
+ scroll: false,
+ title: 'Search for a place',
+ items: [{
+ xtype: 'searchfield',
+ label: 'Search',
+ placeHolder: 'placename',
+ listeners: {
+ action: this.doSearch,
+ scope: this
+ }
+ }, this.resultList]
+ }]
+ });
+ this.items = [this.formContainer];
+ GeoExt.SearchFormPopupPanel.superclass.initComponent.call(this);
+ }
+});
+
GeoExt.LayerList = Ext.extend(Ext.List, {
map: null,
-
- createStore: function() {
+
+ createStore: function(){
Ext.regModel('Layer', {
fields: ['id', 'name', 'visibility', 'zindex']
});
var data = [];
- Ext.each(this.map.layers, function(layer) {
+ 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()});
+ data.push({
+ id: layer.id,
+ name: layer.name,
+ visibility: visibility,
+ zindex: layer.getZIndex()
+ });
}
});
return new Ext.data.Store({
@@ -21,24 +121,18 @@
data: data
});
},
-
- initComponent: function() {
+
+ initComponent: function(){
this.store = this.createStore();
- this.itemTpl = new Ext.XTemplate(
- '<tpl if="visibility == true">',
- '<img width="20" src="img/check-round-green.png">',
- '</tpl>',
- '<tpl if="visibility == false">',
- '<img width="20" src="img/check-round-grey.png">',
- '</tpl>',
- '<span class="gx-layer-item">{name}</span>');
+ this.itemTpl = new Ext.XTemplate('<tpl if="visibility == true">', '<img width="20" src="img/check-round-green.png">', '</tpl>', '<tpl if="visibility == false">', '<img width="20" src="img/check-round-grey.png">', '</tpl>', '<span class="gx-layer-item">{name}</span>');
this.listeners = {
- itemtap: function(dataview, index, item, e) {
+ 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 {
+ }
+ else {
layer.setVisibility(!layer.getVisibility());
}
record.set("visibility", layer.getVisibility());
@@ -50,24 +144,24 @@
});
GeoExt.LayerList.superclass.initComponent.call(this);
},
-
- findLayerRecord: function(layer) {
+
+ findLayerRecord: function(layer){
var found;
- this.store.each(function(record) {
+ this.store.each(function(record){
if (record.get("id") === layer.id) {
found = record;
}
}, this);
return found;
},
-
- onChangeLayer: function(evt) {
+
+ onChangeLayer: function(evt){
if (evt.property == "visibility") {
var record = this.findLayerRecord(evt.layer);
- record.set("visibility", evt.layer.getVisibility());
+ record.set("visibility", evt.layer.getVisibility());
}
}
-
+
});
Ext.reg('gx_layerlist', GeoExt.LayerList);
More information about the Commits
mailing list