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

来自:http://ext.group.javaeye.com/group/blog/267073

关键字: extjs grid store 大数据量 效率

有个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:

 

Js代码

1. grid.suspendEvents();   
2.   
3. // for循环 来更新50条数据   
4.   
5. grid.resumeEvents();   
6.   
7. store.fireEvent("datachanged", store);   

grid.suspendEvents();

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

grid.resumeEvents();

store.fireEvent("datachanged", store); 

 

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

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

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

 

Js代码

1. //GridView配置   
2.   
3. onLoad: Ext.emptyFn,   
4. listeners: {   
5.     beforerefresh: function(v) {   
6.        v.scrollTop = v.scroller.dom.scrollTop;   
7.        v.scrollHeight = v.scroller.dom.scrollHeight;   
8.     },   
9.     refresh: function(v) {   
10.        v.scroller.dom.scrollTop = v.scrollTop +    
11.         (v.scrollTop == 0 ? 0 : v.scroller.dom.scrollHeight - v.scrollHeight);   
12.     }   
13. }  

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

 

 

 

Js代码

1. view: new Ext.ux.grid.BufferView({   
2.           // custom row height   
3.       rowHeight: 34,   
4.       // render rows as they come into viewable area.   
5.          scrollDelay: false,   
6.           forceFit: true,   
7.           deferEmptyText: true,   
8.           emptyText: "无相关数据"  
9. })  

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: "无相关数据"
})

 

Extjs 3.0 新增了Ext.ux.BufferView,对大数据量的显示进行了优化

 

详细可以见

/ext-3.0-rc2/examples/grid/buffer.js

/ext-3.0-rc2/examples/ux/BufferView.js

 

 

ps,3.0正式版是Ext.ux.grid.BufferView, 而RC1,2,3是Ext.ux.BufferView

 

或者用

Ext.ux.LiveGrid

2.0时候就有的扩展了,现在更新到3.0版本