ExtJs Grid 大数据量的显示效率有关问题
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大数据量问题，表现如何，有待验证。
还有什么好的方法，以后慢慢研究 呵呵
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大数据量问题，表现如何，有待验证。
还有什么好的方法，以后慢慢研究 呵呵