使用大数据源迭代 ExtJS 3.1 GridPanel答案

【问题标题】：Iterating ExtJS 3.1 GridPanel With Large Data Source使用大数据源迭代 ExtJS 3.1 GridPanel
【发布时间】：2011-07-19 22:13:48
【问题描述】：

我有一个绑定到 JsonStore（代码中的 var agentDataStore）的 GridPanel（代码中的 var agentGrid）。这家商店有一个字段，显示一个计时器，指示客户服务代理处于状态的时间。因此，每 15 秒我触发一个事件（使用 setInterval()），通过迭代 JsonStore 并更新相应的字段来更新每一行的计时器。

所以，这里是每 15 秒触发一次的事件：

代码：

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

但是，当我在 JsonStore 中获得大约 120 个代理时，页面开始冻结，并且 Firefox 告诉我我的脚本编写时间过长。

所以，我的问题：是否有更好的方法在 GridPanel 的每一行（绑定到 JsonStore）中实现计时器？我意识到迭代不是一个有效的过程，但我还能如何更新每一行？请记住，我需要显示每个代理的状态时间。我想 200 行不应该更新那么多，但也许是？

【问题讨论】：

标签： javascript extjs

【解决方案1】：

您当然可以使用Ext.util.TaskRunner 类来进行更新。我能想到的避免“for each loop”的一种方法是扩展Ext.data.Record 以拥有一个新事件并将TaskRunner 的实例附加到每个记录，并在每个时间间隔触发更新事件。因此，更新了特定记录。

副作用是您将拥有 200 个 TaskRunner 对象，每个 Record 在您的存储中。我们可以使用单例实例吗？我认为您应该能够加入这个想法并提出解决方案。

【讨论】：