CODEWITHSUNDEEP
extjsgrid
Doug Molineux
Doug Molineux

Reputation: 12431

EXTJS ReRendering of the Grid with Datastore

I have a grid made with ExtJS, and I render it to a div that I define, when a refresh is requested I simply "empty" the div using JQuery and then re-render the grid creating new objects each time:

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

And then to empty the div I use this:

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

This works well for like 3 or 4 refreshes, and then it seems to load really slowly, I imagine this is because it re-creates all these objects again, the only thing that changes each time is the "store." I acquire that through an AJAX request, is there a way to refresh this without creating a new grid each time?

I'm pretty new to ExtJS, and I'm making a bit of a transition here from JQuery, which is why I'm using the "empty()" function from JQuery, if you know of a ExtJS alternative, I would be glad to use that instead,

Thanks!

Upvotes: 4

Views: 2024

Answers (1)

McStretch
McStretch

Reputation: 20645

Take a look at Store's load(Object options) and reload(Object options) methods at http://dev.sencha.com/deploy/dev/docs/.

An example of this functionality can be seen in Ext.PagingToolbar. This class contains a button that refreshes a Grid and its Store, without destroying the Grid each time:

    // 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
        }
    },

doLoad() is then simply called from the method doRefresh():

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

I included this code for the sake of a complete example, but really all you need to worry about is the load() or reload() methods. Make sure to read the API to see a full list of arguments that can be passed into the methods.

Upvotes: 4

Related Questions