ExtJs大数据的优化_程序员刘杨

今天所讨论的是“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大数据的优化如果还有什么不懂的可以留言问我。

赞赏

程序员刘杨

———没有写不出的程序，只有不努力的程序员。

ExtJs大数据的优化

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

>>> Hello World <<<

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

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

目前有2条留言：