Zoom function screws up map display

[KennethRichards]

I've written a zoom function that is supposed to zoom to a point by creating a bounding box based on the coordinantes of the point. It attempts to zoom the new extent but it gives me an error and then the map resizes and layers redraw incorrectly at different scales.  The scale bar displays NaN instead of numbers.

function makeZoomButton(id){//id is objectid
        var zBtn = "<div data-dojo-type='dijit.form.Button'><img src='photos/bg_magnify.png'";
        zBtn = zBtn + " width='18' height='18'";
        zBtn = zBtn + " onClick=\"zoomRow('"+id+"')\"></div>"; //activates zoomRow function
        return zBtn;
      }

    function zoomRow(id){
        var grid = dijit.byId('grid');
        var clickedWell = grid.getItem(id);
        var selectedWell = map.graphics;
        var distance = 1000;
        var newExtent = new esri.geometry.Extent({
            "xmin": selectedWell.x - distance,
            "ymin": selectedWell.y - distance,
            "xmax": selectedWell.x + distance,
            "ymax": selectedWell.y + distance,
            "spatialReference":{"wkid":4326}
        });

        console.log(map.graphics.graphics);
        dojo.forEach(map.graphics.graphics,function(graphic){
            console.log(graphic);
          if((graphic.attributes) && graphic.attributes.FID === clickedWell.FID){
            selectedWell = graphic.geometry;
            return;
          }
        });

        map.setExtent(newExtent);
       
    }

Anyone have any ideas on what is going on and how to fix it?
My well layer I am using in my zoon function is in 4326 on the server but I am not sure about the others.

[ATTACH=CONFIG]27123[/ATTACH]

[JasonZou]

Make sure the spatial reference you set in newExtent is the same as the one in selectedWell. If not, change it to be the same. The reason your zoom function messed up is due to the mismatch of the extent (x,y) values and the spatial reference.

[JohnGrayson]

Ken,  Try sending 'newExtent' to the console; it's probably incorrect.  Seems like the loop to find the selected well should come before you create the extent.  Here's another possible approach:

    function zoomRow(id){
        var grid = dijit.byId('grid');
        var clickedWell = grid.getItem(id);
        
       var selectedWell = null;
       dojo.forEach(map.graphics.graphics,function(graphic){           
          if((graphic.attributes) && graphic.attributes.FID === clickedWell.FID){
            selectedWell = graphic.geometry;
            return;
          }
        });

       if(selectedWell != null){
         var distance = 1000;
          var newExtent = new esri.geometry.Extent({
            "xmin": selectedWell.x - distance,
            "ymin": selectedWell.y - distance,
            "xmax": selectedWell.x + distance,
            "ymax": selectedWell.y + distance,
            "spatialReference":{"wkid":4326}
          });
          map.setExtent(newExtent);
       }       
    }

[VinayBansal]

Since map.graphics.graphics is an array , you can simply run the loop and break the loop when requested graphic is found....

function zoomRow(id){
        var grid = dijit.byId('grid');
        var clickedWell = grid.getItem(id);
        
       var selectedWell = null;
var graphic = null;
       for(var iGraphicCnt =0; iGraphicCnt < map.graphics.graphics.length;iGraphicCnt++)
{
graphic = map.graphics.graphics[iGraphicCnt];
          if((graphic.attributes) && graphic.attributes.FID === clickedWell.FID){
            selectedWell = graphic.geometry;
           break;
          }
        }

       if(selectedWell != null){
         var distance = 1000;
          var newExtent = new esri.geometry.Extent({
            "xmin": selectedWell.x - distance,
            "ymin": selectedWell.y - distance,
            "xmax": selectedWell.x + distance,
            "ymax": selectedWell.y + distance,
            "spatialReference":{"wkid":4326}
          });
          map.setExtent(newExtent);
       }       
    }