Is there any event handler in EXTJS Paging Toolbar's Buttons?

5
votes

I am new with EXTJS 4 and this forum. Sorry if it's already discussed in another thread, but I didn't found it.

My question is, I want my Grid Panel with Pagination to update it's store every 10 seconds. I have found a solution using userStore.loadPage(current_page), but it has a problem.

Some time, updating Grid Panel nearly in same time with user click "next" or "prev" in Pagination. This make Grid Panel to not working properly. What I want is, when I click "next" or "prev" or "refresh", the previous request (userStore.loadPage(current_page)) is aborted. So it will not interfere my current request.

But I didn't found event in EXTJS Paging Toolbar to handle "next", "prev", or "refresh" button. What is the solution for this issue? Is there any way?

This is my code just for reference:

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

It is how it is updated every 10 seconds

// 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);
    }
}
4
event-handlingextjs4

4 Answers

3
votes

I think your problem is that your 'auto load' and your 'manual load' are so close together that your grid handles the result coming back from the first request as the second one.

I do agree with Alshten that the best way is to avoid requests that are so close together, you can do this by disabling the store load when there is already a store load in progress. but if you want your functionality I think you can do something like this:

listen to beforeload( Ext.data.Store store, Ext.data.Operation operation, Object eOpts ) event on the store, save the eOpts; listen to load( Ext.data.Store this, Ext.util.Grouper[] records, Boolean successful, Ext.data.Operation operation, Object eOpts ) compare the eOpts with the one you saved, if they are not the same, you know it's not the results you want.

2
votes

You can have a look to the documentation about the paging toolbar component : http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.Paging

There is a change which is fired every time the current page is changed, so it will be fired for "next" and "prev" click events. I haven't tried but I think it may be fired for "refresh" as well.

In my view, the best design would be to disable the buttons of the paging toobar (using the disable() function of this component) while the automatic reload is loading.

0
votes

I use this selector: "gridpanel pagingtoolbar #refresh". I'm able to use in my Controller classes in the init method mostly. You can replace gridpanel with the alias or itemid of your grid.

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

Use 

 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 is the page number

all button clicks like next/prev/refresh will trigger this function