Question

I have a grid with paging toolbar at the bottom and a ‘Load’ button at the top which can be used to load records in the grid.

Thus, initially there are no values present in the grid, but in such condition too the paging toolbar displays Page 1 of 1, and also the icons to go to ‘next’ or ‘last’ page are enabled.

Due to this, when user clicks any of these icons, then, though the records are not loaded but internally the values of ‘page’ and ‘start’ are set as NaN and if then user clicks at ‘Load’ button then these NaN values get passed to the server which is not what is expected.

That is, ideally, it should pass page=0&start=0 where as it passes page=NaN&start=NaN. The server doesn’t recognize these values and throws error.

One quick fix for this is the modification of the code at the server side, but currently that is beyond the scope of our team work and thus I was wondering that how could following be acheived:

Q) How to disable ‘next’, ‘last’ icons at paging toolbar when the grid has no records?

Or,

Q) How to modify the values of ‘page’ and ‘start’ variables before loading the store so that we can pass 0 instead of NaN?

I tried accessing these parameters in beforeload event of the grid store, but there I could find the properties like – startParam or pageParam – displaying the name of parameter, but couldn’t locate any method of accessing/modifying there values.

Does anyone have an idea on this?

Thanks in advance.

PS: ExtJS Version used is 4.

Answer 1

One possible solution could be using

store.loadPage(1);

instead of store.load();.

The second possible solution is to make toolbar initialy disabled and enable it when data is loaded:

var grid = Ext.create('Ext.grid.Panel', {
    // ...
    store: store,
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: store,
        dock: 'bottom',
        disabled: true
    }]
});
store.on('load', function(){
  grid.down('pagingtoolbar').enable();
});