ExtJs4.1.1分页工具栏在Firefox上不起作用

ExtJs4.1.1 pagingToolBar not worked on Firefox

本文关键字：不起作用 Firefox 工具栏 分页 ExtJs4      更新时间：2023-09-26

ExtJs的分页代码在Firefox上不能正常工作，它在IE10、Chrome等其他浏览器上也能正常工作。

我曾使用ExtJs 4.1.1。在这一部分，我为comboGrid定义了一个分页工具栏，并据此进行了分页。我编码了这样的东西：

var bar = new Ext.PagingToolbar({
    store: Store,
    displayInfo: true,
    itemid:'paginationToolbar',
    items: [
    '-',
    'Per Page: ',
    combo],         
    displayMsg: 'Display {0} - {1} of {2}',
    emptyMsg: "No display",
    handleRefresh: Ext.emptyFn,
    doRefresh: function() {
        // Logic
    }
});

并在Ext.apply方法上应用此条。

将数据转储到页面主体上的JSON，改为使用此jQuery的插件。

参见loading data (JSON)和Pivot Grid示例。

我在博客上写了一些关于这方面的文章，最近也遇到了类似的问题。下面的代码适用于ExtJS 4（记不起版本），它肯定适用于ExtJS6.0.0和ExtJS6.0.1。我会感到惊讶的是，原因会是版本号，因为我基于自己的原始博客文章可以追溯到几年前，所以它应该适用于你选择的任何版本。

Ext.define('Ext.toolbar.PagingComboToolbar', {
extend: 'Ext.PagingToolbar',
displayInfo: true,
pageSize: 50,  
displayMsg: 'Display {0} - {1} of {2}',
emptyMsg: "No display",
initComponent: function () {
    var me = this;
    this.store.pageSize = this.pageSize;
    var combo = new Ext.form.ComboBox({
        name: 'perpage',
        width: 75,
        store: new Ext.data.ArrayStore({
            fields: ['id'],
            data: [
              ['10'],
              ['20'],
              ['50'],
              ['75'],
              ['100'],
              ['150']
            ]
        }),
        value: this.pageSize,
        listWidth: 70,
        triggerAction: 'all',
        displayField: 'id',
        valueField: 'id',
        editable: false,
        forceSelection: true,
        listeners: {
            select: {
                fn: function (combo, record) {
                    var newPagesize = parseInt(record.get('id'), 10);
                    this.pageSize = newPagesize;
                    this.store.pageSize = newPagesize;
                    this.store.loadPage(this.store.currentPage);
               },
                scope: this
            }
        }
    });
    Ext.apply(this, {
        items: [
            'Per page: ', 
            combo
        ]
    });
    this.callParent(arguments);
}
});

然后你这样称呼它：

var bar = new Ext.toolbar.PagingComboToolbar({
store: Store,     
handleRefresh: Ext.emptyFn,
doRefresh: function() {
    // Logic
}
});

当然，如果你的combobox表现有点不同，你可以替换它。或者你可以扩展整个类，这样它就可以在构造函数中接受comobox。

相关文章：