EXTJS 使用 Datastore 重新渲染网格

【问题标题】：EXTJS ReRendering of the Grid with DatastoreEXTJS 使用 Datastore 重新渲染网格
【发布时间】：2011-05-26 01:13:48
【问题描述】：

我有一个用 ExtJS 制作的网格，我将它渲染到我定义的 div 中，当请求刷新时，我只需使用 JQuery“清空”该 div，然后每次重新渲染网格以创建新对象：

    var grid = new xg.GridPanel({
    store: store,
    columns: [
    ...
    renderTo: 'db-grid'

然后我用这个来清空 div：

    $("#db-grid").empty();

这适用于 3 或 4 次刷新，然后它似乎加载非常缓慢，我想这是因为它再次重新创建所有这些对象，每次唯一改变的是“存储”。我是通过 AJAX 请求获得的，有没有办法在不每次都创建新网格的情况下刷新它？

我对 ExtJS 很陌生，我正在从 JQuery 做一些转换，这就是为什么我使用 JQuery 的“empty()”函数，如果你知道 ExtJS 替代方案，我很乐意改用它，

谢谢！

【问题讨论】：

标签： extjs grid

【解决方案1】：

在 http://dev.sencha.com/deploy/dev/docs/ 上查看 Store 的 load(Object options) 和 reload(Object options) 方法。

可以在Ext.PagingToolbar 中看到此功能的示例。该类包含一个刷新 Grid 及其 Store 的按钮，而不会每次都破坏 Grid：

    // private
    doLoad : function(start){
        var o = {}, pn = this.getParams();
        o[pn.start] = start;
        o[pn.limit] = this.pageSize;
        if(this.fireEvent('beforechange', this, o) !== false){
            this.store.load({params:o}); // here is the call you're interested in
        }
    },

然后简单地从方法doRefresh()调用doLoad()：

    doRefresh : function(){
        this.doLoad(this.cursor);
    },

为了一个完整的示例，我包含了这段代码，但实际上您只需要担心 load() 或 reload() 方法。请务必阅读 API 以查看可传递给方法的参数的完整列表。

【讨论】：