在ExtJS商店中逐一加载和刷新记录

我想在ExtJS 4.2中加载记录时尝试加载和刷新网格。不幸的是，在（i--）等待至的所有记录在呈现UI之前加载，基本上阻塞。当我加载每条记录时，我需要呈现UI，因为我将有大量记录加载，因为微调器将旋转一分钟。在ExtJS商店中逐一加载和刷新记录

有没有什么办法可以触发刷新并一个接一个地加载它们或者触发刷新，间隔时间为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 && 
    });

}，

来源

2013-07-18 kiextended

你为什么要这么做？这会在每次向网格添加记录时在ExtJS中导致重绘。你会看到巨大的性能下降。如果您的记录过多，并且导致UI挂起，请尝试使用无限网格或分页网格。 – radtad

你确实必须给予一定的执行时间UI渲染。

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

例子：

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

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

你并不需要设置较高的间隔像1秒或2秒，这只会导致uneeded延迟。你只需要让执行从循环中退出，然后它就会渲染等等，只有当其他JavaScript执行完成时它才会回来。如果渲染代码需要超过50ms，那么循环函数只有在完成时才会再次执行，可能会更长。

来源

2013-07-18 18:06:17 rixo

'code' var runner = new Ext.util.TaskRunner（）; runner.start（ { 运行：功能（ARG） { //store.suspendEvents（）;如果（A> 0）{ gr.l（ 'AO'， '正在运行drawCell：' +一）; me.drawCell（商店，RLIST [A--]）;} //store.resumeEvents（）;如果（一<= 0）{ gr.l（ 'AO'，“跑（）; } }，参数：[1]，区间：20，重复：1 }）; – kiextended

这就是我最终解决这个问题的方法。 – kiextended

在ExtJS商店中逐一加载和刷新记录

回答

相关问题