In ExtJS, come carico un negozio quando visualizzo una griglia?

Question

In ExtJS, come carico un negozio quando visualizzo una griglia? Voglio che il negozio carichi solo quando viene visualizzata la griglia (l'utente fa clic su un pulsante per mostrare la griglia, quindi è inutile caricare in anticipo il negozio). Ho provato il listener afterrender ma esegue il rendering della maschera di carico nella posizione errata e il listener afterlayout ricarica la griglia ogni volta che la griglia viene ridimensionata.

Answer 1

Questa è una di quelle cose che può essere un po 'difficile da realizzare perché stavano dando al browser troppo da fare in una volta (particolarmente evidente in IE).

Mi piace utilizzare una combinazione di differimento per consentire al browser di recuperare il tempo necessario a eseguire correttamente il rendering.

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 
    } 
}); 

Giocare con il valore di ritardo/rinvio dovrebbe fornire i risultati desiderati. Il periodo di tempo necessario per ritardare/rinviare dipende dalla complessità della tua griglia e dalla velocità del browser.

Ricordarsi inoltre di rimuovere la maschera al termine del caricamento del negozio.

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

NOTA: A pochi chiarimenti alla risposta da Lloyd - non è necessario impostare autoLoad false, perché questo è il valore di default (cioè: non impostare affatto) e suona come da la tua descrizione che vorresti utilizzare il metodo di caricamento dei negozi, invece di ricaricare.

Answer 2

È possibile impostare autoLoad su false per il negozio e chiamare semplicemente store.reload(); quando l'utente fa clic sul pulsante per mostrare la griglia.

Answer 3

Hai considerato la gestione dell'evento activate? È possibile aggiungere un gestore eventi che carica i dati sull'evento activate e quindi rimuove sé stesso.

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

Qui this si riferisce a GridPanel.