En ExtJS, ¿cómo cargo una tienda cuando visualizo una cuadrícula?

En ExtJS, ¿cómo cargo una tienda cuando visualizo una cuadrícula? Quiero que la tienda solo cargue cuando se muestra la cuadrícula (el usuario hace clic en un botón para mostrar la cuadrícula, por lo que es inútil cargar la tienda de antemano). Probé el oyente afterrender pero muestra la máscara de carga en la ubicación incorrecta y el oyente afterlayout vuelve a cargar la cuadrícula cada vez que se cambia el tamaño de la cuadrícula.En ExtJS, ¿cómo cargo una tienda cuando visualizo una cuadrícula?

Fuente

2010-02-10 Daniel T.

Esta es una de esas cosas que pueden ser un poco difíciles de lograr porque le daban demasiado al navegador para hacer a la vez (especialmente notable en IE).

Me gusta usar una combinación de defer para permitir que el navegador se recupere lo suficiente como para procesar las cosas correctamente.

var grid = new Ext.grid.GridPanel({ 
    ..., 
    listeners : { 
     render : function(grid){  
      grid.body.mask('Loading...'); 
      var store = grid.getStore(); 
      store.load.defer(100, store); 
     }, 
     delay: 200 
    } 
});

Jugando con el valor de la demora/diferir debería darle los resultados deseados. La cantidad de tiempo que tendrá que retrasar/diferir depende de cuán compleja sea su cuadrícula y qué tan rápido sea el navegador.

Recuerde también quitar la máscara cuando la carga de su Tienda se haya completado.

listeners: { 
    load: function(){ 
     yourGrid.body.unmask(); 
    } 
}

NOTA: A pocos aclaraciones a la respuesta de Lloyd - no es necesario para establecer autoLoad a falso, ya que es el valor por defecto (es decir: no establecido en absoluto) y parece que a partir su descripción que desea utilizar el método de carga de tiendas, en lugar de volver a cargar.

Fuente

2010-02-10 14:45:22

Este es un buen enfoque, aunque solo aplicaría enmascaramiento si realmente lo necesita. Si se carga demasiado rápido, la máscara puede parecer un parpadeo. Además, asegúrese de desenmascarar en el controlador de eventos de carga de la tienda. El ejemplo de combinación de navegador de diseño "Pestañas con diseños anidados" usa esto en el método de renderizado de la carga de la tienda en su cuadrícula interna: http://www.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html –

Estoy de acuerdo con los comentarios de Brian: olvídate de hacer esto si tus datos vuelven en menos de ~ 5 segundos. El usuario nunca lo notará. Agregué un tidbit sobre quitar la máscara, gracias. –

Bueno ... Solo me pregunto, ¿para qué sirve 'delay: 200'? ¿Es eso necesario? – Gugan

Puede establecer autoLoad en falso para la tienda y simplemente llame a store.reload(); cuando el usuario hace clic en el botón para mostrar la cuadrícula.

Fuente

2010-02-10 09:53:42 Lloyd

Esto funciona, pero significa que la red no es responsable de su propia tienda. Está bien si compartes una tienda en varios componentes, pero para una sola grilla, prefiero que la grilla sea responsable de la carga de la tienda. –

¿Ha considerado la manipulación del evento activate? Puede agregar un controlador de eventos que carga datos en el evento activate y luego se elimina.

this.on('activate', function(){ 
this.un('activate', arguments.callee); 
    this.store.load(); 
}, this);

Aquí this refiere a GridPanel.

Fuente

2010-02-10 15:04:47 Li0liQ

En ExtJS, ¿cómo cargo una tienda cuando visualizo una cuadrícula?

Respuesta

Cuestiones relacionadas