如何正确管理Ext-js 4.2中的PagingToolbar？

Question

js 4.2），当我管理使用代理（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'
            })
        });

我遇到的问题是：

• 当我调用 store.load() 时，pagingToolbar 不会阻塞，因此我可以单击下一页，并且当加载网格时，我在 pagingtoolbar 上得到不正确的页面。在 Ext js 3 上，当我在网格上设置 loadMask: true 时，当我调用 store.load() 时，pagingToolbar 会被锁定。
• 如果我在 2 或更高的页面上，并且我调用 store.load()，pagingToolbar 不会更新，加载后，当前页面标签为 1。
• 我需要实现一个清理/重置按钮，那么如何清理分页工具栏上的标签。

Answer 1

如果执行

store.load()

的预期结果是进入网格中的第一页，您只需在分页工具栏上调用

moveFirst()

即可，而不是直接在商店中加载。 示例：

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();

此外，在

new

之前不需要关键字

Ext.create(...)

-->

create()

返回指定类的实例。

如果您需要商店发送额外的参数，您可以在调用工具栏上的

moveFirst()

或

doRefresh()

之前在代理上设置它们。 示例：

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