Re-centering a map layer using manually input coordinates in GeoExt

Question

I am trying to create some code in GeoExt that will allow me to centre that map layer I am viewing to coordinates that have been submitted through a formPanel. I would have thought that this would have been fairly straightforward but this is proving to be quite troublesome and I am wondering if any of you guys could help?

So far I have created the the panel with 2 boxes to accept the eastings and northings but can't work out how to get the values that have been submitted to actually move the image.

The code I have cobbled together this far is:

formPanelCoord = new GeoExt.form.FormPanel({
    border: true,
    layout: 'anchor',
    bodyStyle:'padding: 20px',
        items: [{
        xtype: "textfield",
        width: 100,
        fieldLabel: "Easting",
        name: "search_lc",
        value: "",
        emptyText:'Easting',
        allowblank: false
    },

{
        xtype: "textfield",
        width: 100,
        fieldLabel: "Northing",
        name: "search_lc",
        value: "",
        emptyText:'Northing',
        allowblank: false
    }],



    listeners: {
       actioncomplete: function(form, action) {

        features = action.response.features;
        console.log(features.length)
     }



  }


});


formPanelCoord.addButton({
        text:"Go to Coord",
        handler:function() {
        console.log(formPanelCoord);
            //alert(formPanelCoord.items.items[0].getValue());
            //alert(formPanelCoord.items.items[1].getValue());
            formPanelCoord.items.items[0].getValue();
            formPanelCoord.items.items[1].getValue();
                       //function recentreMap (form) {
                       var easting = from.Easting.value;
                       var northing = form.Northing.value;
                       //var easting = formPanelCoord.items.items[0].value;
                       //var northing = formPanelCoord.items.items[1].value;
                       map.setCenter(new OpenLayers.LonLat(easting,northing));


formPanelCoord.addButton({
        text:"Go to Coord",
        handler:function() {
            this.search();
     },
     scope:formPanelCoord
});


            //this.search();
     },
     scope:formPanelCoord
});

Any help gratefully received!

Answer 1

Assuming your points are latitude and longitude you can use the OpenLayers Map panTo function.

//assuming map is the map object
//and x and y are in map projection
map.panTo(new OpenLayers.LonLat(x, y));

If your input points aren't in the map projection you'll have to project them. If Eastings and Northings aren't in one of the default OpenLayers projections you'll have to include the proj4js library to build projection objects.

//define a prjection, proj4 string from http://spatialreference.org
Proj4js.defs["EPSG:28355"] = "+proj=utm +zone=55 +south +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs";

in_projection = new OpenLayers.Projection("EPSG:28355");
map_projection = new OpenLayers.Projection("EPSG:4326"); //default OpenLayers map projection

zoom_point = new OpenLayers.LonLat(easting, northing);
zoom_point.transform(in_projection, map_projection); //in place transform