Thanks everyone for your help. I tried to apply your suggestions, however, I couldn't solve it (I'm sure this is due to my lack of JavaScript knowledge). I changed my FeatureLayer source to that of Petroleum service from ArcGIS.com and posted the complete code below. Please place the working code (to zoom to the selected extent) in the right place.
Thanks
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Layer in a map service - [ON-DEMAND]</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css" />
<style>
html, body, #map {
padding:0;
margin:0;
height:100%;
}
</style>
<script src="http://js.arcgis.com/3.10/"></script>
<script>
var map;
require([
"esri/InfoTemplate",
"esri/map",
"esri/dijit/Scalebar",
"esri/dijit/BasemapGallery",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/query",
"esri/toolbars/draw",
"dojo/dom",
"dojo/on",
"dojo/parser",
"dojo/_base/array",
"esri/Color",
"dijit/form/Button",
"esri/geometry/Extent",
"dojo/domReady!"
],
function (
InfoTemplate, Map, Scalebar, BasemapGallery, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol,
Query, Draw, dom, on, parser, arrayUtil, Color, Extent
) {
parser.parse();
var selectionToolbar, featureLayer;
map = new Map("map", {
basemap: "topo",
center: [-97.33, 37.68], // longitude, latitude
zoom: 10,
sliderStyle: "medium"
});
var scalebar = new Scalebar({
map: map,
scalebarUnit: "dual",
attachTo: "bottom-left"
});
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
map: map
}, "basemapGallery");
basemapGallery.startup();
basemapGallery.on("error", function(msg) {
console.log("basemap gallery error: ", msg);
});
map.on("load", initSelectToolbar);
var fieldsSelectionSymbol =
new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5]));
var content = "<b>Status</b>: ${STATUS}" +
"<br><b>Cummulative Gas</b>: ${CUMM_GAS} MCF" +
"<br><b>Total Acres</b>: ${APPROXACRE}" +
"<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters";
var infoTemplate = new esri.InfoTemplate("${FIELD_NAME}", content);
featureLayer = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",
{
mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate: infoTemplate,
outFields: ["*"]
});
featureLayer.setSelectionSymbol(fieldsSelectionSymbol);
featureLayer.on("selection-clear", function () {
});
map.addLayer(featureLayer);
on(dom.byId("selectFieldsButton"), "click", function () {
selectionToolbar.activate(Draw.EXTENT);
});
on(dom.byId("clearSelectionButton"), "click", function () {
featureLayer.clearSelection();
});
function initSelectToolbar (event) {
selectionToolbar = new Draw(event.map);
var selectQuery = new Query();
on(selectionToolbar, "DrawEnd", function (geometry) {
selectionToolbar.deactivate();
selectQuery.geometry = geometry;
featureLayer.selectFeatures(selectQuery,
FeatureLayer.SELECTION_NEW);
});
}
});
</script>
</head>
<body class="claro">
<button id="selectFieldsButton" data-dojo-type="dijit/form/Button">Select Fields</button>
<button id="clearSelectionButton" data-dojo-type="dijit/form/Button">Clear Selection</button>
<button id="ZoomToSelectionButton" data-dojo-type="dijit/form/Button">Zoom to Selected Features</button><br>
<div id="map"data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'"
style="padding:0;">
<div style="position:absolute; right:20px; top:10px; z-Index:999;">
<div data-dojo-type="dijit/TitlePane"
data-dojo-props="title:'Switch Basemap', closable:false, open:false">
<div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery"></div>
</div>
</div>
</div>
</div>
</body>
</html>