ExtJS Grid 大数据量的显示效率问题

有个grid,需要定时ajax取数据,大概500行.

现在在ajax的响应函数里面用大概类似下面的方法更新

store.each(function(record){
  var newData = jsonData.data[record.id];
  record.set(dataIndex,newData.SuccessCount);
  record.commit();
});

之后发现效率特别低,瓶颈主要有2个:

 

1.解析json的速度问题

 

--因为ajax取回来的json有600多k..解析起来需要8s, 后来改为iframe里面jsp直接生成js object,监听iframe的onload事件,优化到了1s内

 

2.布局器的渲染效率跟不上.

 

--因为有500*6个单元格,直接写入store的话,界面会挂死一会

 

做法1:

 

grid.suspendEvents();

// for循环 来更新50条数据

grid.resumeEvents();

store.fireEvent("datachanged", store); 

 

   这种做法会导致gird的滚动条滚动,于是还需要保存滚动位置,大概的方法如下:

   (根据需求要适当修改,如我之前是在store的add事件里面设置新的位置,在grid的bodyscroll里面保存位置)

   但是这种方法会有一个短暂的滚动,视觉效果不是很好,暂时没找到解决方法.(也许add前grid.suspendEvents()可以)

 

//GridView配置

onLoad: Ext.emptyFn,
listeners: {
    beforerefresh: function(v) {
       v.scrollTop = v.scroller.dom.scrollTop;
       v.scrollHeight = v.scroller.dom.scrollHeight;
    },
    refresh: function(v) {
       v.scroller.dom.scrollTop = v.scrollTop + 
        (v.scrollTop == 0 ? 0 : v.scroller.dom.scrollHeight - v.scrollHeight);
    }
}

 

做法2: 最后根据需求,还是改成了每次只读取100条记录,在滚动条拉到底部的时候再填入100条.不是很完美,但是时间来不及改了.

 

 

相关文章:  <续 :ExtJs Grid 大数据量的显示效率问题> http://atian25.iteye.com/blog/413958

 

评论

6 楼 atian25 2012-11-26  

ZDbox 写道

做法2: 最后根据需求,还是改成了每次只读取100条记录,在滚动条拉到底部的时候再填入100条,
请问该做法是怎么实现的啊？。。
怎么才能监听到滚动条拉到底部呢？

建议直接使用文末链接http://atian25.iteye.com/blog/413958 中提到的插件。它们就是这个原理做的。

5 楼 ZDbox 2012-11-15  

做法2: 最后根据需求,还是改成了每次只读取100条记录,在滚动条拉到底部的时候再填入100条,
请问该做法是怎么实现的啊？。。
怎么才能监听到滚动条拉到底部呢？

4 楼 atian25 2008-11-17  

lzycxy 写道

如果需要8s，我的建议是界面上可以给出一个“Loading...”的提示，让客户的感知更好。

问题算是基本解决了.按现在这种方法,只需要2s左右了.
需求比较怪,没办法,同时要显示这么多,而且要求速度.
loading是必然,但是自动刷新的时候,loading也不允许8s之久.

3 楼 lzycxy 2008-11-17  

如果需要8s，我的建议是界面上可以给出一个“Loading...”的提示，让客户的感知更好。

2 楼 atian25 2008-11-16  

需求问题,呵呵...不允许分页

1 楼 bulargy 2008-11-15  

汗，取500条一个屏幕也看不完啊。分页吧~~~