如何在Ext-js 4.2中正确管理PagingToolbar？ [英] How to manage PagingToolbar in Ext-js 4.2 correctly?

问题描述

js 4.2），当我在使用代理（ajax）的网格上管理工具栏时，我遇到了一些问题。

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'
            })
        });

我遇到的问题是：

• 当调用store.load（）时，pagingToolbar不会阻止，所以我可以点击下一页，当加载网格时，我在pagingtoolbar上找到不正确的页面。在Ext js 3上，当我加载时，在网格上为true，当调用store.load（）时，pagingToolbar将被锁定。


• 如果我在2或更高版本的页面上，我打电话给store.load（），pagingToolbar不更新，加载后，当前页面标签为1。


• 我需要实现一个干净/重置按钮，那么我怎么能清理分页工具栏上的标签。

提前感谢

推荐答案

如果执行 store.load（）的预期结果是转到网格中的第一页，可以简单地调用 moveFirst（）在您的分页工具栏上，而不是直接加载到商店。示例：

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

此外，您不需要关键字 new before Ext.create（...） - > create（）返回指定类的实例

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

如果您需要您的商店发送额外的参数，可以在调用 moveFirst（）或 doRefresh（）。示例：

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

这篇关于如何在Ext-js 4.2中正确管理PagingToolbar？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！