How to manage PagingToolbar in Ext-js 4.2 correctly?

Question

js 4.2), and I've got some problems when I manage a toolbar on a grid which use a Proxy (ajax).

 this.grid  = new Ext.create('Ext.grid.Panel',{
            region      : 'center',
            loadMask    : true,
            layout      : 'fit',
            store       : 'Contenedores',
             
            tbar: [
                   { text: 'Exportar Excel' },
                   '->',
                   { text:'Buscar',     handler: this.buscar,   scope: this},
                   '-',
                   { text:'Limpiar',    handler: this.limpiar,  scope: this}
            ],
            columns : [],
             
            bbar : new Ext.create('Ext.toolbar.Paging',{
                store: 'Contenedores', displayInfo: true,
                displayMsg  : 'Registros {0} - {1} de {2}',
                emptyMsg    : 'No hay registros'
            })
        });

The problems, I'm having are:

• When I call to store.load(), pagingToolbar doesn't block so I can click on the next page, and when the grid is loaded I get the incorrect page on pagingtoolbar. On Ext js 3 when I se loadMask: true on the grid, the pagingToolbar gets locked when I call store.load().
• If I'm on a page like 2 or higher and I call to store.load(), pagingToolbar doesn't update, after loading, the current page label to 1.
• I need to implement a clean/reset button, so how can I clean the labels on the pagingtoolbar.

Answer 1

If an expected result of doing a store.load() is to go the the first page in your grid, you can simply call moveFirst() on your paging toolbar, rather than loading on the store directly. Example:

var pagingtb = Ext.create('Ext.toolbar.Paging',{
                store: 'Contenedores', 
                displayInfo: true,
                displayMsg  : 'Registros {0} - {1} de {2}',
                emptyMsg    : 'No hay registros'
            });

this.grid  = Ext.create('Ext.grid.Panel',{
            region      : 'center',
            loadMask    : true,
            layout      : 'fit',
            store       : 'Contenedores',

            tbar: [
                   { text: 'Exportar Excel' },
                   '->',
                   { text:'Buscar',     handler: this.buscar,   scope: this},
                   '-',
                   { text:'Limpiar',    handler: this.limpiar,  scope: this}
            ],
            columns : [],

            bbar : pagingtb 
        });

pagingtb.moveFirst();

Also, you don't need the keyword new before Ext.create(...) --> create() returns an instance of the specified class.

If you need your store to send extra parameters, you can set them on the proxy before calling moveFirst() or doRefresh() on your toolbar. Example:

store.getProxy().extraParams.someParameter1 = 'some value';
store.getProxy().extraParams.someParameter2 = 'another value';
pagingtb.doRefresh(); // or .moveFirst() if you want the grid to 
                      // move to the first page after load