ygorth

Navigation | AMD Module Require, Event onExtentHistoryChange()!

Discussion created by ygorth on Jun 17, 2013
Latest reply on Jun 17, 2013 by kenbuja
Hello guys,

What's wrong with my javascript AMDDojo code? I can't associate the event onExtentHistoryChange in my object navToolbar.

The functions of the Navigation works.

Code below:

var map, navToolbar;
require(["dojo/_base/connect", "esri/map", "esri/toolbars/navigation", "dijit/registry", "dijit/form/Button", "dojo/domReady!"],
    function (
        connect,
        Map,
        Navigation,
        registry,
        Button
        ) {
        map = new Map("mapDiv", {
            center: [-56.049, 38.485],
            zoom: 3,
            basemap: "gray"
        });

      // ERROR : object is not a function

        navToolbar = new Navigation(map);

        connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

        function extentHistoryChangeHandler() {
            registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();
            registry.byId("zoomnext").disabled = navToolbar.isLastExtent();
        }

        var buttonZoomin = new Button({
            iconClass: 'zoominIcon',
            onClick: function () {
                navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);
            }
        }, "zoomin");

        var buttonZooout = new Button({
            iconClass: 'zoomoutIcon',
            onClick: function () {
                navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);
            }
        }, "zoomout");

        var buttonPan = new Button({
            iconClass: 'panIcon',
            onClick: function () {
                navToolbar.activate(esri.toolbars.Navigation.PAN);
            }
        }, "pan");

        var buttonZoomfullext = new Button({
            iconClass: 'zoomfullextIcon',
            onClick: function () {
                navToolbar.zoomToFullExtent();
            }
        }, "zoomfullext");

        var buttonZoomprev = new Button({
            iconClass: 'zoomprevIcon',
            onClick: function () {
                navToolbar.zoomToPrevExtent();
            }
        }, "zoomprev");


        var buttonZoomnext = new Button({
            iconClass: 'zoomnextIcon',
            onClick: function () {
                navToolbar.zoomToNextExtent();
            }
        }, "zoomnext");

        var buttonDeactivate = new Button({
            iconClass: 'deactivateIcon',
            onClick: function () {
                navToolbar.deactivate();
            }
        }, "deactivate");
    });


    <div id="toolbar" data-dojo-type="dijit/Toolbar">
        <button id="zoomin" type="button"></button>
        <button id="zoomout" type="button"></button>
        <button id="pan" type="button"></button>
        <button id="zoomfullext" type="button"></button>
        <button id="zoomprev" type="button"></button>
        <button id="zoomnext" type="button"></button>
        <button id="deactivate" type="button"></button>
    </div>
    <div id="mapDiv">
    </div>


I tried using dojo / on and nothing!

References: https://developers.arcgis.com/en/javascript/jsapi/navigation-amd.html#onextenthistorychange and http://dojotoolkit.org/reference-guide/1.9/dijit/form/Button.html

Thank you!

Outcomes