Esiste un gestore di eventi nei pulsanti di EXTJS Paging Toolbar?

Question

Sono nuovo con EXTJS 4 e questo forum. Scusa se è già stato discusso in un'altra discussione, ma non l'ho trovato.

La mia domanda è, voglio il mio Grid Panel con Pagination per aggiornare il suo store ogni 10 secondi. Ho trovato una soluzione usando userStore.loadPage(current_page), ma ha un problema.

Un po 'di tempo, aggiornando Grid Panel quasi nello stesso tempo con l'utente, fai clic su "next" o "prev" in Pagination. Questo rende Grid Panel non funzionante correttamente. Quello che voglio è che quando faccio clic su "next" o "prev" o "refresh", la richiesta precedente (userStore.loadPage(current_page)) è stata interrotta. Quindi non interferirà con la mia richiesta attuale.

Ma non ho trovato evento nella barra degli strumenti di paginazione di EXTJS per gestire il pulsante "successivo", "prev" o "Aggiorna". Qual è la soluzione per questo problema? C'è un modo?

Questo è il mio codice appena per riferimento:

// create User Store 
var userStore = Ext.create('Ext.data.Store', { 
    model: 'EDC', 
    autoLoad: true, 
    pageSize: 10, 
    proxy: { 
     type: 'ajax', 
     url : 'Monitoring', // it is using Java servlet, so I write it this way 
     reader: { 
      type: 'json', 
      root: 'edc', 
      totalProperty: 'total' 
     } 
    } 
}); 

// create Grid Panel 
Ext.create('Ext.grid.Panel', { 
    store: userStore, 
    width: 800, 
    height: 400, 
    columns: [ 
     { 
      text: "ID", 
      width: 50, 
      dataIndex: 'id' 
     }, 
     { 
      text: 'Serial Number', 
      flex: 1, 
      dataIndex: 'sn' 
     } 
     // etc... 
    ], 
    dockedItems: [{ 
     xtype: 'pagingtoolbar', 
     store: userStore, 
     dock: 'bottom', 
     displayInfo: true 
    }] 
}); 

E 'quanto viene aggiornato ogni 10 secondi

// after on Ready, reload every 10 seconds 
Ext.onReady(function(){ 
    self.setInterval("reloadCurrentEdc()", 10000); 
}); 

// function for update 
function reloadCurrentEdc(){ 
    if(typeof userStore != 'undefined'){ 
     userStore.loadPage(userStore.currentPage); 
    } 
} 

Answer 1

si può avere uno sguardo alla documentazione sul componente barra degli strumenti di paging: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.Paging

C'è un change che viene attivato ogni volta che si modifica la pagina corrente, quindi sarà rosso per gli eventi click "next" e "prev". Non ho provato ma penso che possa essere licenziato anche per "refresh".

Dal mio punto di vista, il miglior design sarebbe quello di disabilitare i pulsanti del toobar di paging (usando la funzione disable() di questo componente) mentre il caricamento automatico si sta caricando.

Answer 2

Penso che il tuo problema sia che il 'carico automatico' e il 'carico manuale' sono così vicini che la tua griglia gestisce il risultato che torna dalla prima richiesta come seconda.

Sono d'accordo con Alshten sul fatto che il modo migliore è quello di evitare le richieste che sono così vicine tra loro, è possibile farlo disabilitando il carico del negozio quando c'è già un carico del negozio in corso. ma se vuoi la tua funzionalità, penso che puoi fare qualcosa del genere:

ascoltare beforeload(Ext.data.Store store, Ext.data.Operation operation, Object eOpts) evento sul negozio, salvare il eOpts; ascolta load(Ext.data.Store this, Ext.util.Grouper[] records, Boolean successful, Ext.data.Operation operation, Object eOpts) confronta gli eOpts con quello che hai salvato, se non sono gli stessi, sai che non sono i risultati che vuoi.

Answer 3

Io uso questo selettore: "gridpanel pagingtoolbar #refresh". Sono in grado di utilizzare principalmente le mie lezioni di controller nel metodo init. È possibile sostituire il gridpanel con l'alias o l'itemid della griglia.

. 
. 
. 
init: function() { 
    this.control({ 
    'gridpanel pagingtoolbar #refresh':{ 
     click:function(){ 
     console.log('grid panel', arguments); 
     } 
    } 
    }); 
}, 
. 
. 
. 

Answer 4

Usa

beforehange: function (tbar, pageData, eOpts) { 
// here you can load data from server and load the data to store 
    return false // will avoid triggering store events 
} 

pageData è il numero della pagina

tutti i click dei pulsanti come successivo/precedente/aggiornamento attiverà questa funzione