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.

thanks in advance.

did the answer work for you? If so, please mark as answered or provide reason why it did not work. — James
Thanks for your help but I need to call store.load(with paramethers), and I found for myself that I can do it with: this.grid.store.loadPage(1,{params: {..}}), but I still need to find a way to clear the pagingtoolbar when I use my clean/resert button (point 3). thanks again for your help :D — Pregunton
updated answer to show example of setting params on store's proxy before calling moveFirst() on paging toolbar — James

James James · Accepted Answer · 2013-04-11T22:19:00

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

How to manage PagingToolbar in Ext-js 4.2 correctly?

1 Answers