[HELPED] Architect doesn't like function in a loop but how to move

[Scott]

A new application has the code show below in a controller tied to an event, it works fine. Sencha Architect gives me a information message "Don't make functions in a loop" referring to the callback function in the stopsStore.load() method. Not a big deal as it is working but I assume the information message is about efficiency because it creates the function every time through the loop. I tried several ways to make that function defined outside the loop and called from the callback but could not make it work, I could never get the parameters passed to the function. Anyone have some insight on how to do this, it is probably something basic that I am missing.

What I am doing is reading truck trips from one store and then getting the stops for each trip and plotting them on a map. The load on the store for the stops is getting them from the server. I used the callback on load to add to the map so that I could load each trip's stops and plot them individually. I had to use the callback to make it all synchronous or the trips would interfere with each other loading the store from the server.

Maybe there is a better way to accomplish that?

Thanks,

Scott

MQA.withModule('shapes', function() {
    
    var line = [];

    var store = Ext.ComponentQuery.query('#dataGrid')[0].getStore();
    var stopsStore = Ext.getStore('stopsStore');

    var count = store.getCount();

    // loop through the trips and map the stops of each trip.
    
    for (var ii=0; ii<count; ii++){
        rec = store.getAt(ii);

        stopsStore.getProxy().extraParams.trip          = rec.get('TRIP#');
        stopsStore.getProxy().extraParams.numDispatches = rec.get('HOWMANY');
        stopsStore.load(function(me, records, operation, success){
                var theCount = records.resultSet.records.length;
                var latlon = [];
                for (var jj = 0; jj < theCount; jj++) {
                    stop = records.resultSet.records[jj];
                    latlon.push(stop.get('LATITUDE'));
                    latlon.push(-stop.get('LONGITUDE'));
                }

                line[ii] = new MQA.LineOverlay();
                line[ii].setShapePoints(latlon);
                map.addShape(line[ii]);
            }
        );

    }
});

[sean.lanktree]

You can define it outside of the loop like below. Be sure to watch out for global variables (rec was global in your post). Also, I was not certain where "map" and "line" were defined too.

MQA.withModule('shapes', function () {
    var line               = [],
        store              = Ext.ComponentQuery.query('#dataGrid')[0].getStore(),
        stopsStore         = Ext.getStore('stopsStore'),
        count              = store.getCount(),
        xp                 = stopsStore.getProxy().extraParams,
        stopsStoreCallback = function (records) {
            var theCount = records.length,
                latlon   = [],
                line     = [],
                stop;
            for (var jj = 0; jj < theCount; jj++) {
                stop = records[jj];
                latlon.push(stop.get('LATITUDE'));
                latlon.push(stop.get('LONGITUDE'));
            }

            line[ii] = new MQA.LineOverlay();
            line[ii].setShapePoints(latlon);

            // not sure where "map" is defined...
            map.addShape(line[ii]);
        },
        rec;

    // loop through the trips and map the stops of each trip.

    for (var ii = 0; ii < count; ii++) {
        rec = store.getAt(ii);

        Ext.apply(xp, {
            trip          : rec.get('TRIP#'),
            numDispatches : rec.get('HOWMANY')
        });

        stopsStore.load({
            callback : stopsStoreCallback
        });
    }
});

[Scott]

That works great. I tried almost this exactly but I think my error was including parens () after stopsStoreCallback within the stopsStore.load method.

Thanks for your help.