loading EXT Js

NigelAlford · ‎08-27-2012

I'm having some browser inconsistencies with loading EXTJS and i'm unsure of the problem anyone have a second to look this through for anything big that I'm doing wrong?

Thanks in advance,

 <!DOCTYPE html>
 <html lang="en">
 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>


 <title>LEADER GIS</title>
 <!-- style START-->

 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css"> 
 <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.0.7-gpl/resources/css/ext-all.css"/>

 <!-- STYLE END-->

 <!-- SCRIPT START-->
  
 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1" ></script>
 <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.0.7-gpl/ext-all.js"></script>
 <script type="text/javascript">djConfig = { parseOnLoad:true };</script> 
   
 <script type="text/javascript" charset="utf-8">

  dojo.require("esri.map");
  dojo.require("esri.tasks.geometry");
  
  var map, point, geoSvc, geoprocessor;
   
  function init(){
    
   alert('INIT FUNCTION');
   var viewport = new Ext.Viewport({ 
    layout: "fit", 
    title: "EXT JS Layout", 
    items: [{ 
     layout: "border", 
     items: [{ 
      region: "center", 
      title: "NS GIS", 
      html: "<div id='map' style='height:100%; width:100%;z-index=: 1000;'></div>"  
      }, { 
      region: "north", 
      height: 50, 
      collapsible: false, 
      contentEl:"header"  
      }, { 
      region: "south", 
      height: 50, 
      collapsible: false, 
      contentEl: "footer" // this gets the content from the div named "footer" 
      }, { 
      region: "west", 
      title: "Left Panel", 
      width: 250, 
      split: true, 
      collapsible: true,
      //contentE1: "leftpane"
      html: '<br> <br>     Enter the Longitude & Latitude <br><br>     Latitude  : <input type="text" id="latitude" value="41.950625"> <br> <br>     Longitude: <input type="text" id="longitude" value="-87.5465625"> <br> <br>     <button onclick="showposition();" dojoType="dijit.form.Button">Locate</button>' , 
      //listeners:{ 
      //  collapse: resizeMap, 
      //  expand: resizeMap 
      //} 
      }, { 
      region: "east", 
      width: 300, 
      xtype: 'tabpanel', 
      activeTab: 0, // index or id 
      items:[{ 
       title: ' Track ', 
       html: '<br> <br>This contains track information.' 
       },{ 
       title: ' Mile Post ', 
       html: '<br> <br> This contains milepost information.' 
       },{ 
       title: ' Operating Station ', 
       html: '<br> <br> This contains operating station information.' 
       }
       
      ]//end of east items
      
      }
      
     ]//end of layout items
     
     }
    
    ]//end of viewport items
   
    }); //end of viewport
    
   
   var initialExtent = new esri.geometry.Extent(-144.13, 7.98, -52.76, 68.89, new esri.SpatialReference({wkid: 4326}));
   //map = new esri.Map("map");
   map = new esri.Map("map", { 
    wrapAround180:true, 
    extent: esri.geometry.geographicToWebMercator(initialExtent), 
   });
   

   
   var url = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer"; 
   var referenceUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places_Alternate/MapServer"; 
   var dynamicUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Daytime_Population/MapServer"; 
   
   var trackUrl="#";
   var milepostUrl="#";
   //var opstnUrl="#";
    
   var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer(url); 
   var dynamicLayer = new esri.layers.ArcGISDynamicMapServiceLayer(dynamicUrl,{opacity:0.4}); 
   var referenceLayer = new esri.layers.ArcGISTiledMapServiceLayer(referenceUrl);      
    
   var tackLayer = new esri.layers.ArcGISTiledMapServiceLayer(trackUrl);
   var milepostLayer=  new esri.layers.ArcGISTiledMapServiceLayer(milepostUrl);
     // var opstnLayer=  new esri.layers.ArcGISTiledMapServiceLayer(opstnUrl);
   
     map.addLayer(tiledLayer);
     map.addLayer(dynamicLayer); 
     map.addLayer(referenceLayer); 

     map.addLayer(tackLayer);
     map.addLayer(milepostLayer);
     //map.addLayer(opstnLayer);
   
   //**********************************
   
   //var webMercator = new ESRI.ArcGIS.Client.Projection.WebMercator();
   //var mp = webMercator.FromGeographic(new MapPoint(gc.Longitude, gc.Latitude)) as MapPoint;
   //map.PanTo(mp);

    
   //*******************************************
   
    geoSvc = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
   
   //get location on map
   
   
    
    
  }//end of init()
  
  //ONLOAD 
  dojo.addOnLoad(init);
   
  
  //Perform the geocode. This function runs when the "Locate" button is pushed.             
  function showposition() { 
   alert('SHOWPOSITION FUNCTION'); 
   
   var latitude = { 
    'SingleLine': dojo.byId("latitude").value 
   }; 
  
   var longitude = { 
    'SingleLine': dojo.byId("longitude").value 
    }; 
   
 //     var options = { 
 //      latitude:latitude,
 //      longitute:longitude,
 //      //address:address,
 //         outFields:["*"] 
 //      }; 
    //optionally return the out fields if you need to calculate the extent of the geocoded point 
 //      locator.addressToLocations(options);
    
   
   projectPoint(longitude, latitude);
    
    
  }
  
  function projectPoint(longitude, latitude){
   alert('projectPoint');
   //point =  New ESRI.ArcGISExplorer.Geometry.Point(longitude, latitude);
    point = new esri.geometry.Point(longitude, latitude, new esri.SpatialReference({wkid : 3857}));
   alert(point);
    map.graphics.clear();
   var symbol = new esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND);
   var graphic = new esri.Graphic(point, symbol); alert(map.spatialReference);
   //geoprocessor = new esri.tasks.Geoprocessor(" http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Locators/ESRI_Geocode_USA/GeocodeServer");
   //geoprocessor.setOutputSpatialReference(map.spatialReference);
     
   //var outSR = new esri.SpatialReference({ wkid: 102113});
   map.graphics.add(graphic);
   alert(2);
   
   //geoSvc.project([ point ], outSR, function(projectedPoints) {
   //      pt = projectedPoints[0];
   //      graphic.setInfoTemplate(new esri.InfoTemplate("Coordinates",
   //        "<p> X: " + pt.x +
   //        "<br/> Y: " + pt.y +
   //        "</p>" ));
   //      map.infoWindow
   //        .setTitle(graphic.getTitle())
   //        .setContent(graphic.getContent())
   //        .show(point, map.getInfoWindowAnchor(point));
   //    });
   
   //zoomTo point
   
   var wmpoint = esri.geometry.geographicToWebMercator(point);
   map.centerAt(wmpoint);
   alert(3);
  }
  
   function zoomTo(lat, lon) { 
    var point = new esri.geometry.Point(lon, lat, {wkid: "4326"}); 
    var wmpoint = esri.geometry.geographicToWebMercator(point); 
    map.centerAt(wmpoint);
   }
  

  

 </script>

 <!-- SCRIPT END-->

 </head>
 <body class="claro">
  <div id="header"> 
     <span><img src="..\images\logo.png" border="0" align="left" > </span> 
  </div>
   
  <div id="props-panel" class="x-hide-display"> </div>
  <div id="footer" class="x-hide-display"> 
  </div> 
  <div id="north" class="x-hide-display"> 
  
  </div> 
 </body>
 </html>

KellyHutchins · ‎08-28-2012

I ran a quick test using your code and it looks like your app functions except for the Locate portion. In your code you are passing in two objects one for latitude and one for longitude into the projectPoint function. In order for this to work you need to modify your code to retrieve the actual values from the passed in objects. Here's a revised version of your app:

 <!DOCTYPE html>
 <html lang="en">
 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>


 <title>LEADER GIS</title>
 <!-- style START-->

 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css"> 
 <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.0.7-gpl/resources/css/ext-all.css"/>

 <!-- STYLE END-->

 <!-- SCRIPT START-->
  
 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1" ></script>
 <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.0.7-gpl/ext-all.js"></script>
 <script type="text/javascript">djConfig = { parseOnLoad:true };</script> 
   
 <script type="text/javascript" charset="utf-8">

  dojo.require("esri.map");
  dojo.require("esri.tasks.geometry");
  
  var map, point, geoSvc, geoprocessor;
   
  function init(){

   var viewport = new Ext.Viewport({ 
    layout: "fit", 
    title: "EXT JS Layout", 
    items: [{ 
     layout: "border", 
     items: [{ 
      region: "center", 
      title: "NS GIS", 
      html: "<div id='map' style='height:100%; width:100%;z-index=: 1000;'></div>"  
      }, { 
      region: "north", 
      height: 50, 
      collapsible: false, 
      contentEl:"header"  
      }, { 
      region: "south", 
      height: 50, 
      collapsible: false, 
      contentEl: "footer" // this gets the content from the div named "footer" 
      }, { 
      region: "west", 
      title: "Left Panel", 
      width: 250, 
      split: true, 
      collapsible: true,
      //contentE1: "leftpane"
      html: '<br> <br>     Enter the Longitude & Latitude <br><br>     Latitude  : <input type="text" id="latitude" value="41.950625"> <br> <br>     Longitude: <input type="text" id="longitude" value="-87.5465625"> <br> <br>     <button onclick="showposition();" dojoType="dijit.form.Button">Locate</button>' , 
      //listeners:{ 
      //  collapse: resizeMap, 
      //  expand: resizeMap 
      //} 
      }, { 
      region: "east", 
      width: 300, 
      xtype: 'tabpanel', 
      activeTab: 0, // index or id 
      items:[{ 
       title: ' Track ', 
       html: '<br> <br>This contains track information.' 
       },{ 
       title: ' Mile Post ', 
       html: '<br> <br> This contains milepost information.' 
       },{ 
       title: ' Operating Station ', 
       html: '<br> <br> This contains operating station information.' 
       }
       
      ]//end of east items
      
      }
      
     ]//end of layout items
     
     }
    
    ]//end of viewport items
   
    }); //end of viewport
    
   
   var initialExtent = new esri.geometry.Extent(-144.13, 7.98, -52.76, 68.89, new esri.SpatialReference({wkid: 4326}));
   //map = new esri.Map("map");
   map = new esri.Map("map", { 
    wrapAround180:true, 
    extent: esri.geometry.geographicToWebMercator(initialExtent), 
   });
   

   
   var url = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer"; 
   var referenceUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places_Alternate/MapServer"; 
   var dynamicUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Daytime_Population/MapServer"; 
   
   var trackUrl="#";
   var milepostUrl="#";
   //var opstnUrl="#";
    
   var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer(url); 
   var dynamicLayer = new esri.layers.ArcGISDynamicMapServiceLayer(dynamicUrl,{opacity:0.4}); 
   var referenceLayer = new esri.layers.ArcGISTiledMapServiceLayer(referenceUrl);      
    
   var tackLayer = new esri.layers.ArcGISTiledMapServiceLayer(trackUrl);
   var milepostLayer=  new esri.layers.ArcGISTiledMapServiceLayer(milepostUrl);

   
     map.addLayer(tiledLayer);
     map.addLayer(dynamicLayer); 
     map.addLayer(referenceLayer); 

     map.addLayer(tackLayer);
     map.addLayer(milepostLayer);

    
   //*******************************************
   
    geoSvc = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
   
    
    
  }//end of init()
  
  //ONLOAD 
  dojo.addOnLoad(init);
   
  
  //Perform the geocode. This function runs when the "Locate" button is pushed.             
  function showposition() { 

   
   var latitude = { 
    'SingleLine': dojo.byId("latitude").value 
   }; 
  
   var longitude = { 
    'SingleLine': dojo.byId("longitude").value 
    }; 

   
   projectPoint(longitude, latitude);
    
    
  }
  
  function projectPoint(longitude, latitude){

    var point = esri.geometry.geographicToWebMercator(new esri.geometry.Point(longitude.SingleLine, latitude.SingleLine));

    map.graphics.clear();
   var symbol = new esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND);
   var graphic = new esri.Graphic(point, symbol);

   map.graphics.add(graphic);

   map.centerAt(point);

  }
  
   function zoomTo(lat, lon) { 
    var point = new esri.geometry.Point(lon, lat, {wkid: "4326"}); 
    var wmpoint = esri.geometry.geographicToWebMercator(point); 
    map.centerAt(wmpoint);
   }
  

  

 </script>

 <!-- SCRIPT END-->

 </head>
 <body class="claro">
  <div id="header"> 
     <span><img src="..\images\logo.png" border="0" align="left" > </span> 
  </div>
   
  <div id="props-panel" class="x-hide-display"> </div>
  <div id="footer" class="x-hide-display"> 
  </div> 
  <div id="north" class="x-hide-display"> 
  
  </div> 
 </body>
 </html>