Trouble with on.pausable for map extent-change events

[TracySchloss]

I have a queryTask that populates a dGrid based on the user's selection from a dropdown list.  Initially the dGrid is empty and the user must select  from a list of school districts.  Once the user makes a selection, only those schools appear in the grid.  I would like the user to be able to clear that selection and automatically change the contents of the grid to be all schools in the current map extent instead.

The queryTask that selects the schools by district is handled by

 registry.byId("distSelect").on('change', function(){
            clearDiv('searchResultsGrid');
            var distCode = registry.byId("distSelect").value;
            selectSchoolsByDistrict(distCode);
        });
        function selectSchoolsByDistrict(distCode){
            extResults = false;
            extentChangeHandler.pause();
            schoolQuery.where = "SD_GIS.OGI.EDUCATION_SCHOOL_PUBLIC.CtyDist = '" + distCode + "'";
            schoolQueryTask.on('complete', completeSelection);
            schoolQueryTask.execute(schoolQuery);
        }
        function selectSchoolsError(err){
            console.log("Error in selectSchoolsByDist " + err.message);
        }
        function completeSelection(results){
            if (results) {
                updateGrid(results.featureSet);//populate the school list
                //  switchDomClass('btnClearSel','show');
                zoomDistrict();//zoom to the school district
            }
            
        }

I have an event listener defined for the map's extent change that executes another query based on the current map extent, rather than a where clause.

        extentChangeHandler = on.pausable(map, 'extent-change', function(map){
            clearDiv('searchResultsGrid');
            var schoolQuery2 = new Query();
            schoolQuery2.outSpatialReference = spatialReference;
            schoolQuery2.returnGeometry = true;
            schoolQuery2.outFields = ['*'];
            schoolQuery2.geometry = map.extent;
            if (extResults) {
                schoolQueryTask2.execute(schoolQuery2, updateGrid);
            }
        });

I have a button for clearSelection that resets my title, clears my grid and is supposed to resume my extentChangeHandler.

        registry.byId('btnClearSel').on('click', function(){
            extResults = true;
            extentChangeHandler.resume();
            var currentExtent = map.extent;
            map.setExtent(currentExtent);
            clearDiv('countyDistGridDiv');
            clearDiv('searchResultsGrid');
            map.infoWindow.hide();
            switchDomClass('countyDistGridDiv', 'hide');
            dom.byId('subHeader').innerHTML = 'Missouri Public School Directory';
            registry.byId('footerPane').domNode.innerHTML = "";
            dom.byId('chooseHeader').innerHTML = "";
            dom.byId('listHeader').innerHTML = "All schools shown on map:";
            registry.byId("distSelect").reset();
            registry.byId("countySelect").reset();
        }

);

It didn't feel like just resuming the extentChangeHandler was going to execute, so I added a map.setExtent(currentExtent) to try to fire the paused event, which I think I'm resuming.  When I put a breakpoint in extentChangeHandler, it doesn't look like it ever gets to the lines that schoolQueryTask2.

I'm not 100% sure I need the Boolean extResults, which I have set initially as false.  It seems like I want it so that the grid doesn't immediately start populating with thousands of schools from this state-wide map.

Here's a link:

https://ogitest.oa.mo.gov/DESE/schoolSearch/index.html

[KenBuja]

What's happening is the function selectSchoolsByDistrict is getting called when you click the button "Clear Selection", which contains the line

extentChangeHandler.pause();

You can see this by putting a breakpoint on that line.

It's being called again when you reset the distSelect FilteringSelect dijit.

 registry.byId('btnClearSel').on('click', function(){
    extResults = true;
    extentChangeHandler.resume();
    var currentExtent = map.extent;
    map.setExtent(currentExtent);
    clearDiv('countyDistGridDiv');
    clearDiv('searchResultsGrid');
    map.infoWindow.hide();
    switchDomClass('countyDistGridDiv', 'hide');
    dom.byId('subHeader').innerHTML = 'Missouri Public School Directory';
    registry.byId('footerPane').domNode.innerHTML = "";
    dom.byId('chooseHeader').innerHTML = "";
    dom.byId('listHeader').innerHTML = "All schools shown on map:";
    registry.byId("distSelect").reset();//the distSelect change event fires here
    registry.byId("countySelect").reset();
});

[TracySchloss]

I've been messing with this a while.  I'm sure I've done something squirrely as I've added lines here and there in an attempt to fix it.  It also seems to be running back through zoomDistrict again, and I haven't traced where that is coming from.

I could take the whole button out and not try to populate the grid from the map extent too.  But to me, a grid of data should tie back to what the user sees on the screen.  Nearly all my other projects have that functionality.  The twist with this one is trying to allow either querying or extent events using the same grid.

[TracySchloss]

Maybe I need to also set the filteringSelect as a pausable event?  I'd like to be able to reset the list back to the prompt 'Select a district' without firing the change event.