PagingToolbar 中的 ExtJS 6 组合框事件无法在溢出模式下工作

Question

在我的 ExtJS Grid 中，我使用以下代码声明 bbar：

Ext.define('Ext.toolbar.PagingComboToolbar', {
  extend: 'Ext.PagingToolbar',
  resources: {
    displayMessage: Resources.Labels.Ext_Paging_DisplayMsg,
    emptyMessage: Resources.Labels.Ext_Paging_EmptyMsg
},
  displayInfo: true,
  enableOverflow: true,
  pageSize: 50,      
  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, {
         displayMsg: this.resources.displayMessage,
         emptyMsg: this.resources.emptyMessage,
        items: [
            combo
        ]
    });

    this.callParent(arguments);
}
});

为了完整起见，这就是我在网格定义中声明此 class 的方式：

bbar: Ext.create('Ext.toolbar.PagingComboToolbar', {
            store: store,
            enableOverflow: true,
 }),

请注意，这里要注意的最重要的事情是我附加到分页机制的组合框。它允许您动态定义页面的大小。当网格不处于溢出模式时，这非常有效（我找不到更好的方式来描述它）。

只要我缩小网格，就会出现 .x-toolbar-more-icon:before 图标，单击此图标后，组合框将显示在小菜单中。我仍然看到选项 (10,20,50,...)，我可以点击它们，但 select 事件不再触发。如果我决定在任何给定点再次使网格变宽（宽度足以在网格中显示组合框而不是隐藏在 'more' 按钮后面），select 事件突然重新出现并且一切再次完美运行.

话虽如此，原来的（开箱即用）按钮仍然可以使用。例如，如果刷新页面按钮也出现在菜单中，单击该按钮将实际刷新网格。

这是一个显示问题的 Fiddle。如果您调整网格的宽度，您将能够重现该问题（例如 400 像素）

有什么想法吗？

Answer 1

看起来这是一个常见的错误，也发生在早期版本中：https://www.sencha.com/forum/showthread.php?308363

作为解决方法，您可以使用 change 事件代替 select。检查您的 Fiddle 修改。

PagingToolbar 中的 ExtJS 6 组合框事件无法在溢出模式下工作

ExtJS 6 combobox event in PagingToolbar not working in overflow mode

combobox

extjs

event-handling

extjs6