EXTJS Repetition of a data warehouse grid

Question

I have a grid made using ExtJS and I render it in a div, which I define when an update is requested. I just “empty” the div using jQuery and then re-create the grid creating new objects every time:

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

And then, to remove the div, I use this:

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

This works well as 3 or 4 updates, and then it seems to load very slowly, I think this is due to the fact that it creates all these objects again, the only thing that changes every time is the "store". I get this through an AJAX request, is there a way to update it without creating a new grid every time?

I am new to ExtJS and I am going a bit here from JQuery, so I use the "empty ()" function from JQuery, if you know an alternative to ExtJS, I would be happy to use this instead.

Thanks!

Answer 1

Take a look at the Store 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 updates the 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() then simply called from the doRefresh() method:

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

I have included this code for a complete example, but in fact all you need to worry about are the load () or reload () methods. Be sure to read the API to see a complete list of arguments that can be passed to methods.