如何在 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 上，当我在网格上设置 loadMask: 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();

此外，在 Ext.create(...) --> create() 返回之前，您不需要关键字 new指定类的实例.

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屋！