在 ExtJS 存储中一一加载并刷新记录

Question

我正在尝试在 ExtJS 4.2 中加载记录时加载和刷新网格。 不幸的是，在一个紧密的循环中，while (i--) 等到 ALL 记录在渲染 UI 之前加载，基本上是阻塞的。我需要在加载每条记录时渲染 UI，因为我有大量记录要加载，因为微调器会旋转一分钟。

有什么方法可以触发刷新并继续加载它们..或者以 2 秒的间隔触发刷新？或每 10 条记录..

这是我的代码：

// In the parent function:

while (i--)
{
  gr.l('ao', 'Running pool');
  me.drawCell(store, rList[i]);
  // need to refresh the grid at this point ..
  // printing console.log outputs but UI is not refreshed ..
}


// The function which does the adding to the store ..

drawCell: function (store, roster)
{
  var me = this;
  if (!roster)
    return false;

  // fix the common issues
  firstName = roster.firstName ? roster.firstName : roster.userId;
  lastName = roster.lastName ? roster.lastName : '';
  companyName = roster.companyName ? roster.companyName : '';
  phoneNumbers = me.localStore.getPhoneNumbers(roster);
  userId = roster.userId;

  // add to list
  store.add(
  {
    firstName: firstName,
    firstNameGroup: firstName.charAt(0).toUpperCase(),
    userId: userId,
    lastName: lastName,
    companyName: companyName,
    iconCls: 'avatar-' + userId,
    status: (roster.status == 'offline') ? 'offline':roster.status,
    locationStatus: 'office',
    locationStatusDetail: 'Office',
    icon: me.getAvatarUrl(userId),
    systemMetadata: roster.systemMetadata,
    middleInitials: roster.middleInitials,
    userMetadata: roster.userMetadata,
    statusGroup: me.getStatusGroup(roster.status),
    group: (roster.systemMetadata && roster.systemMetadata.tags && 
  });

},

Answer 1

您确实必须给 UI 渲染一些执行时间。

您可以用在给定时间间隔执行的非阻塞函数替换您的阻塞 while 循环。

例子：

var interval = setInterval(function() {
    if (i--) {
        // load some records

        // refresh grid
    } else {
        cancelInterval(interval);
    }
}, 50);

您不需要设置像 1s 或 2s 这样的高间隔，这只会导致不必要的延迟。您只需要让执行从循环中逃脱，然后它将呈现等，并且只有在其他 javascript 执行完成时才会返回。如果渲染代码耗时超过 50ms，那么循环函数只有在完成后才会再次执行，可以更长。