[OpenLayers-Users] Define several states of view (Zoom/Area)

[Philippe.rieffel at rwth-live.de]

Hey Bryan,
thanks again for this hint, it is really helpful. I try to implement this in my own piece, but due to limited brain and js capacities I can't figure out, what I am doing wrong here. Here is the relevant part of my code:

Ext.namespace('Ext.selectdata');
            Ext.selectdata.zooms = [
            [-13.25, -28.77, 45.664, 9.828, 'Whole Africa']
            ];
            var zoomstore = new Ext.data.ArrayStore({
                fields: [{ name : 'ymin', type: 'float'}, { name : 'xmin', type: 'float'}, { name : 'ymax', type: 'float'}, { name : 'xmax', type: 'float'}, { name : 'label', type: 'string'}],
                data : Ext.selectdata.zooms
             });
            var drawControl = new OpenLayers.Control.DrawFeature(
                layer,
                OpenLayers.Handler.Polygon,
                {handlerOptions: {multi: true}}
            );
            
            var mapPanel = new GeoExt.MapPanel({
                region:'center',
                title: "Map",
                layers: [layer,base,roads],
                extent: new OpenLayers.Bounds(-13.25, -28.77, 45.664, 9.828),
                bbar: [
                    new GeoExt.Action({
                        control: drawControl,
                        text: "Create",
                        enableToggle: true
                    }), {
                        text: "Delete",
                        handler: function() {
                            gridPanel.getSelectionModel().each(function(rec) {
                                var feature = rec.get("feature");
                                modifyControl.unselectFeature(feature);
                                store.remove(rec);
                                if(feature.state !== OpenLayers.State.INSERT) {
                                    feature.state = OpenLayers.State.DELETE;
                                    layer.addFeatures([feature]);
                                }
                            });   
                        }
                    },
                    new Ext.form.ComboBox({
                        tpl: '<tpl for="."><div ext:qtip="{label}" class="x-combo-list-item">{label}</div></tpl>',
                        store: zoomstore,
                        displayField:'label',
                        typeAhead: true,
                        mode: 'local',
                        forceSelection: true,
                        triggerAction: 'all',
                        width:125,
                        emptyText:'Quick Zooms',
                        selectOnFocus:true,
                        listeners: {'select': function (combo,record){this.mapPanel.map.zoomToExtent(new OpenLayers.Bounds(record.data.ymin,record.data.xmin,record.data.ymax,record.data.xmax).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")));},
                        scope:this}
                    }),
                     "->", {
                        text: "Save",
                        handler: function() {
                            store.commitChanges();
                            saveStrategy.save();
                        }
                    }
                ]
            });
            mapPanel.map.addControl(drawControl);
            var modifyControl = new OpenLayers.Control.ModifyFeature(layer);
            mapPanel.map.addControl(modifyControl);
            modifyControl.activate();

When I run the whole thing, it works, means the (single) selection option is visible in the toolbar, but when I select it, Firebug gives me the following error:

this.mapPanel is undefined
select(Object { name="combo"}, Object { name="record"})test4_...om.html (Zeile 126)
DomHelper()ext-all.js (Zeile 7)
DomHelper()ext-all.js (Zeile 7)
swfobject(Object { name="a"}, Object { name="b"})ext-all.js (Zeile 11)
swfobject(Object { name="b"})ext-all.js (Zeile 11)
DomHelper()ext-all.js (Zeile 7)
DomHelper()ext-all.js (Zeile 7)
DomHelper(Object { name="c"})ext-all.js (Zeile 7)
I(Object { name="M"})ext-all.js (Zeile 7)
[Break on this error] listeners: {'s...ayers.Projection("EPSG:900913")));}, test4_...om.html (Zeile 126)

It points to the line with the 'listeners' in the Combo Box, but I have no real idea what this means or how I can fix this. Ideas / fixes (I think it is quite a simple problem for a trained developer (which I am not)) are highly appreciated. I also tried to examine the code from your example, but this did not bring me any further....

Kind regards,
Philippe




Hi Philippe,

I have put together some 
http://www.bryanmcbride.com/blog/geoexplorer_hacks_2 documentation  for
implementing similar "Quick Zooms" in GeoExplorer. GeoExplorer is a
component of the  http://opengeo.org/community/suite/ OpenGeo Suite , built
on OpenLayers and GeoExt. You can see the "Quick Zooms" in action 
http://www.opengeohost.com/geoexplorer/ here . Hopefully this will get you
going in the right direction!

BRYAN

-----
Bryan R. McBride, GISP
http://www.bryanmcbride.com bryanmcbride.com 
http://geoserving.net/ geoserving.net 
-- 
View this message in context: http://osgeo-org.1803224.n2.nabble.com/Define-several-states-of-view-Zoom-Area-tp5427671p5427774.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.
_______________________________________________
Users mailing list
Users at openlayers.org
http://openlayers.org/mailman/listinfo/users