ExtJs Grid 大数据量的显示效率问题
ExtJs Grid 大数据量的显示效率问题
2009年06月03日 星期三 12:00
有个grid,需要定时ajax取数据,大概500行.

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

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

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

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

或者改为使用专用插件来实现，例如华表。

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

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

做法1:

grid.suspendEvents();    grid.resumeEvents();    store.fireEvent("datachanged", store);  
   这种做法会导致gird的滚动条滚动,于是还需要保存滚动位置,大概的方法如下:

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

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

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条.不是很完美,但是时间来不及改了.

经过相当长一段时间的验证，我们不能保证用户的电脑最低配置和我们差不多，那么在大数据量展示方面，彻底放弃grid是我们无奈的选择

替代方法之前已经讲过，再复述一遍也无妨：

1，用iframe嵌套jsp页面表格展示数据，少量的数据可以考虑使用grid，例如不到百行的，或者能实现数据库分页，这个时候grid还是可以用用的。

2，使用专业插件来实现（表格涉及到复杂运算最好使用这个），推荐华表。

3，推荐extjs中可以实现的table列表格式，你在guibuilder中可以看到table的拍板格式，类似于自己在jsp里面画表格，要制作成list有点难度，这个了解就好，实现比较麻烦。

4,使用以下代码来解决：

view: new Ext.ux.grid.BufferView({  

          // custom row height  

       rowHeight: 34,  

      // render rows as they come into viewable area.  

          scrollDelay: false,  

           forceFit: true,  

           deferEmptyText: true,  

           emptyText: "无相关数据" 

})

不过是在Extjs3.0的版本里面才有Ext.ux.grid.BufferView 这个控件，用来专门解决grid大数据量问题，表现如何，有待验证。

还有什么好的方法，以后慢慢研究   呵呵