Есть ли какой-нибудь обработчик событий в кнопках панели пейджинга EXTJS?

Question

Я новичок в EXTJS 4 и на этом форуме.Извините, если это уже обсуждалось в другой ветке, но я не нашел его.

Мой вопрос: я хочу, чтобы моя Grid Panel с Pagination обновляла свое хранилище каждые 10 секунд.Я нашел решение, используя userStore.loadPage(current_page), но у него есть проблема.

Некоторое время, обновляя Grid Panel почти одновременно, пользователь нажимает "next" или "prev" в Pagination.Это заставляет Grid Panel работать неправильно.Что я хочу, так это то, что когда я нажимаю «далее», «предыдущий» или «обновить», предыдущий запрос (userStore.loadPage(current_page)) прерывается.Так что это не помешает моему текущему запросу.

Но я не нашел события в панели инструментов подкачки EXTJS для обработки кнопки «следующий», «предыдущий» или «обновить».Какое решение для этой проблемы?Есть ли способ?

Это мой код только для справки:

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

Так обновляется каждые 10 секунд

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

Я думаю, что ваша проблема в том, что ваша «автоматическая загрузка» и ваша «ручная загрузка» настолько близки, что ваша сетка обрабатывает результат, возвращающийся из первого запроса, как второй.

Я согласен с Альштеном, что лучший способ - избегать запросов, которые находятся настолько близко друг к другу, вы можете сделать это, отключив загрузку хранилища, когда загрузка хранилища уже выполняется. но если вы хотите, чтобы ваша функциональность, я думаю, вы можете сделать что-то вроде этого:

прослушать событие beforeload( Ext.data.Store store, Ext.data.Operation operation, Object eOpts ) в магазине, сохранить eOpts; послушайте load( Ext.data.Store this, Ext.util.Grouper[] records, Boolean successful, Ext.data.Operation operation, Object eOpts ) сравните eOpts с тем, который вы сохранили, если они не совпадают, вы знаете, что это не тот результат, который вы хотите.

Answer 2

Вы можете ознакомиться с документацией по компоненту панели инструментов подкачки: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.Paging

Существует change, который запускается каждый раз, когда текущая страница изменяется, поэтому она будет запускаться для событий "следующего" и "предыдущего" нажатия. Я не пробовал, но я думаю, что он может быть запущен и для «обновления».

На мой взгляд, лучшим вариантом было бы отключить кнопки пейджера (используя функцию disable() этого компонента) во время загрузки с автоматической перезагрузкой.

Answer 3

Использование

 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 - номер страницы

все нажатия кнопок, такие как следующий / предыдущий / обновление, активируют эту функцию

Answer 4

Я использую этот селектор: "gridpanel pagingtoolbar #refresh".Я могу использовать в моих классах контроллера в основном метод init.Вы можете заменить gridpanel псевдонимом или itemid вашей сетки.

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