Iterating ExtJS 3.1 GridPanel With Large Data Source

I have a GridPanel (var agentGrid in code) that is bound to a JsonStore (var agentDataStore in code). This store has a field that shows a timer indicating the time a customer service agent is in a state. So, every 15 seconds I fire an event (using setInterval()) that updates the timer on each row by iterating the the JsonStore and updating the appropriate field.

So, here is the event that gets fired every 15 seconds:

Code:

function agentTimerTick() {
    var newTime = getStateTime(); //assume this always works
    agentDataStore.each(function (rec) {
        rec.set('statetimedisplay', newTime); //set the field开发者_C百科 of the JsonStore to the timer value
    });
    agentDataStore.commitChanges();
}

However, once I get about 120 agents in the JsonStore, the page starts freezing and firefox tells me that my script is taking too long to write.

So, my questions: Is there a better way to implement a timer in each row of a GridPanel (bound to a JsonStore)? I realize that iterating isn't an efficient process, but how else could I update every row? Keep in mind, I need to show the time in state for each agent. I would imagine that 200 rows shouldn't bee that many to update, but maybe it is?

You can surely make use of the Ext.util.TaskRunner class to do the updating. One method that I can think of to avoid the "for each loop" will be to extend the Ext.data.Record to have a new event and attach an instance of TaskRunner to each record and the update event is fired at every time interval. So, a particular record is updated.

The side effect will be you will have 200 TaskRunner objects with each Record in your store. Can we make use of the singleton instance? I think you should be able to add to this idea and come up with the solution.