2010年12月17日   ExtJs, 头条   9,500 次浏览

今天所讨论的是“ExtJs大数据的优化”。ExtJs作为前端展现层框架,以其丰富的功能,被广大程序员所接受。不管是从界面漂亮的程序,还是功能完善的程序,ExtJs的控件都高居同列产品的榜首。

但是在使用过程中如果碰到大数据的时候,就会出现页面假死的情况,因为ExtJs是采用异步方式从后台获取数据的,如果数据量过于庞大,就需要更久的时间来等待数据,从而导致了假死的出现。这种情况多出现在使用表和树的时候,这时就需要我们进行ExtJs大数据的优化了。以下是根据我个人经验所实现的ExtJs大数据的优化,主要实现原理是:利用空间换时间。

一、ExtJs大数据的优化原理介绍
我们都知道与从数据库读取数据相比,从内存读数据是要快上许多的,所以我就利用JavaScrit的数组功能,先将数据读取后保存至数组中,然后再进行操作。那么也许有人会问:难道数组的数据不是从数据库获得的吗?难道速度会快吗?没错。因为如果将数据加载到表或树的时候需要ExtJs需要对每条数据进行许多处理后才会显示,从而速度就慢了。

二、ExtJs大数据的优化具体方法
1、创建数组,加载数据:

var allData= [];
var allStore = new Ext.data.Store({
     //...
});
allStore.on('datachanged', function() {
    allData = [];
    // 循环数据将数据添加到数组
    allStore.each(function(r){
        allData.push({ID:r.data.ID, NAME:r.data.NAME, ORGNAME:r.data.ORGNAME});
    });
});

2、将数组数据分页加载至表

var pageSize = 10;
toStore.load({params:{start:0,limit: pageSize}});
toStore.on('beforeload', function(s, params){
    var start = params.params.start;
    var end = start + params.params.limit;
    // 取数组数据
    toProxy.data = {totalProperty: toData.length,root: toData.slice(start, end)};  
});

提示:树也有相关的分页代码,可以去网上找找。

3、如果你需要将操作的结果保存到另一张表的话,就可以对数组进行增、删、改、查操作,这时你会明显感觉到速度的提升

// 扩展JavaScript的Array功能 查询、删除、增加对象
Array.prototype.getForObj = function(obj) {
    var index = -1;
    for(var i = 0, n = this.length; i < n; i++)
        if(this[i].ID == obj.ID) {index = i;break;};
    return index;
}
Array.prototype.delForObj = function(obj) {
    var i = this.getForObj(obj);
    if(i == -1) return;
    this.splice(i, 1);
}
Array.prototype.addForObj = function(obj) {
    if(this.getForObj(obj) != -1) return;
    this.push(obj);
}
 
// 添加至数组
function add() {
    var s = toDataGrid.getSelectionModel().getSelections();
    for(var i = 0, n = s.length; i < n; i++) {
        var obj = {ID:s[i].get('ID'),NAME:s[i].get('NAME'),ORGNAME:s[i].get('ORGNAME')};
        toData.addForObj(obj);
    }
    toStore.reload();
}

好了,差不多就是这些了,关于ExtJs大数据的优化如果还有什么不懂的可以留言问我。

赞 赏
申明:除非注明,本站文章均为原创,转载请以链接形式标明本文地址。 如有问题,请于一周内与本站联系,本站将在第一时间对相关内容进行处理。
本文地址: http://www.yyjjssnn.cn/articles/635.html
相关阅读: ExtJs, JavaScript

>>> Hello World <<<

这篇内容是否帮助到你了呢?

如果你有任何疑问或有建议留给其他朋友,都可以给我留言。

目前有2条留言:

  • 1# 匿名:
    2012-04-13 00:49
    @匿名

    第三方推送数据难道不是先保存到数据库么?
    这种假死一般是发生在大数据量传递过程中,可以第三方减少每次发送的数据量,分批发送,也可以先将数据保存到数据库再分批取出,相信效果会好很多。

  • 2# 匿名:
    2012-04-12 19:34

    你好,如果我前端ext要时时接收从第三方推送过来的大量数据,容易出现假死现象,浏览器崩溃,怎么优化,谢谢你回答哦

:wink: :twisted: :surprised: :smile: :smile9: :smile8: :smile7: :smile6: :smile5: :smile56: :smile55: :smile54: :smile53: :smile52: :smile51: :smile50: :smile4: :smile49: :smile48: :smile47: :smile46: :smile45: :smile44: :smile43: :smile42: :smile41: :smile40: :smile3: :smile39: :smile38: :smile37: :smile36: :smile35: :smile34: :smile33: :smile32: :smile31: :smile30: :smile2: :smile29: :smile28: :smile27: :smile26: :smile25: :smile24: :smile23: :smile22: :smile21: :smile20: :smile1: :smile19: :smile18: :smile17: :smile16: :smile15: :smile14: :smile13: :smile12: :smile11: :smile10: :smile0: :sad: :rolleyes1: :redface: :razz: :question: :neutral: :mrgreen: :mad: :lol: :idea: :exclaim: :evil: :eek: :cry: :cool: :confused: :biggrin: :arrow:

友情链接: 程序员刘杨 刘杨
Copyright 2003~2018 保留所有权利 | 网站地图
备案号:湘ICP备14001005号-2

湘公网安备 43011102001322号