ngalford

loading EXT Js

Discussion created by ngalford on Aug 27, 2012
Latest reply on Aug 28, 2012 by khutchins-esristaff
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>

Outcomes