example - EXTJS reenvío de la cuadrícula con Datastore

extjs xtype grid

Question

Tengo una grilla hecha con ExtJS, y la renderizo en un div que defino, cuando se solicita una actualización, simplemente "vacía" el div usando JQuery y luego vuelvo a renderizar la grilla creando nuevos objetos cada vez:

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

Y luego, para vaciar el div, uso esto:

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

Esto funciona bien para 3 o 4 actualizaciones, y luego parece cargarse muy despacio, me imagino que esto se debe a que vuelve a crear todos estos objetos nuevamente, lo único que cambia cada vez es la "tienda". Adquirí eso a través de una solicitud de AJAX, ¿hay alguna manera de actualizar esto sin crear una nueva cuadrícula cada vez?

Soy bastante nuevo en ExtJS, y estoy haciendo una transición aquí desde JQuery, por lo que estoy usando la función "empty ()" de JQuery, si conoces una alternativa de ExtJS, estaría contento de usar eso en su lugar,

¡Gracias!

Answer 1

Eche un vistazo a los métodos de load(Object options) la tienda load(Object options) y reload(Object options) en http://dev.sencha.com/deploy/dev/docs/ .

Un ejemplo de esta funcionalidad se puede ver en Ext.PagingToolbar . Esta clase contiene un botón que actualiza una cuadrícula y su tienda, sin destruir la cuadrícula cada vez:

 // 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() simplemente se llama desde el método doRefresh() :

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

Incluí este código por el bien de un ejemplo completo, pero realmente todo lo que necesita preocuparse es de los métodos load () o reload (). Asegúrese de leer la API para ver una lista completa de los argumentos que se pueden pasar a los métodos.