ExtJs4.1.1 pagingToolBar没有在火狐上工作

Question

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

我使用了ExtJs4.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方法。

Answer 1

将数据转储到页面正文上的JSON，而使用此jQuery插件。

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

Answer 2

我在我的博客上写了一些关于这个的文章，最近我也遇到了类似的问题。下面的代码在ExtJS 4上工作(无法回忆版本)，它肯定可以工作ExtJS 6.0.0和ExtJS 6.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
}
});

当然，如果您的组合框的行为有点不同，您可以替换它。或者您可以扩展整个类，以便它能够接受构造函数中的comoboxes。