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



在我的ExtJS网格中,我使用以下代码来声明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);
}
});

为了完整起见,以下是我在网格定义中声明此类的方式:

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

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

只要我缩小网格,就会出现.x-tooolbar-more-icon:fore图标,单击该图标后,组合框将显示在小菜单中。我仍然可以看到选项(10,20,50,…),我可以点击它们,但select事件不再被触发。如果我决定在任何给定点再次加宽网格(宽度足以在网格中显示组合框,而不是隐藏在"更多"按钮后面),则选择事件会突然再次出现,一切都会再次完美工作。

话虽如此,原来的(开箱即用)按钮仍然可以继续工作。例如,如果刷新页面按钮也出现在菜单中,则单击该按钮实际上会刷新网格。

这是一个显示问题的Fiddle。如果你摆弄网格的宽度,你将能够重现问题(例如400像素)

有什么想法吗?

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

作为一种解决方法,您可以使用change事件而不是select。检查你修改的Fiddle。

最新更新