¿Hay algún controlador de eventos en los botones de EXTJS Paging Toolbar?

Question

Soy nuevo con EXTJS 4 y este foro. Lo siento si ya se discutió en otro hilo, pero no lo encontré.

Mi pregunta es, quiero que mi Grid Panel con Pagination actualice su tienda cada 10 segundos. He encontrado una solución usando userStore.loadPage(current_page), pero tiene un problema.

En algún momento, actualizando Grid Panel casi al mismo tiempo con el usuario, haga clic en "siguiente" o "anterior" en Paginación. Esto hace que el panel de cuadrícula no funcione correctamente. Lo que quiero es que cuando hago clic en "Siguiente" o "Anterior" o "Actualizar", la solicitud anterior (userStore.loadPage(current_page)) se cancela. Por lo tanto, no interferirá con mi solicitud actual.

Pero no encontré evento en la barra de herramientas de localización EXTJS para manejar el botón "siguiente", "anterior" o "actualizar". ¿Cuál es la solución para este problema? ¿Hay alguna manera?

Este es mi código sólo para referencia:

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

Es la forma en que se actualiza cada 10 segundos

// 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

Puede echar un vistazo a la documentación sobre el componente barra de herramientas de paginación: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.Paging

Hay un change que se dispara cada vez que se cambia la página actual, por lo que será fi rojo para eventos de clic "siguiente" y "anterior". No lo he intentado, pero creo que también puede ser "refrescado".

En mi opinión, el mejor diseño sería deshabilitar los botones de la barra de desplazamiento de megafonía (utilizando la función disable() de este componente) mientras se carga la recarga automática.

Answer 2

Creo que su problema es que su "carga automática" y su "carga manual" están tan juntas que su cuadrícula maneja el resultado de la primera solicitud como el segundo.

Estoy de acuerdo con Alshten que la mejor forma de hacerlo es evitar solicitudes que están tan próximos entre sí, se puede hacer esto mediante la desactivación de la carga tienda cuando ya hay una carga tienda en curso. pero si quiere su funcionalidad, creo que puede hacer algo como esto:

escuchar el evento beforeload(Ext.data.Store store, Ext.data.Operation operation, Object eOpts) en la tienda, guarde el eOpts; escucha load(Ext.data.Store this, Ext.util.Grouper[] records, Boolean successful, Ext.data.Operation operation, Object eOpts) compara los eOpts con el que guardaste, si no son lo mismo, sabes que no son los resultados que deseas.

Answer 3

Utilizo este selector: "gridpanel pagingtoolbar #refresh". Puedo usar principalmente en mis clases de Controlador en el método init. Puede reemplazar gridpanel con el alias o itemid de su grilla.

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

Answer 4

Uso

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 es el número de la página

todas las pulsaciones de botón como NEXT/PREV/refresco que activa esta función