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