ExtJS 6 combobox event in PagingToolbar not working in overflow mode

Question

In my ExtJS Grid, I use the following code to declare the 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);
}
});

For the sake of completeness, this is how I declare this class in my grid's definition:

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

Note that the most important thing to notice here is the combobox that I append to the paging mechanism. It lets you define the size of the page on the fly. This works very well when the grid is not in overflow mode (I can't find a better way to describe it).

As soon as I make the grid smaller, the .x-toolbar-more-icon:before icon appears and the combobox will be displayed in the little menu after clicking on this icon. I still see the options (10,20,50,...) and I can click on them, but the select event is not fired anymore. If I decide to make the grid wider again at any given point (wide enough to display the combobox in the grid and not hidden behind the 'more' button), the select event suddenly reappears and everything works perfectly again.

Having said that, the original (out of the box) buttons still keep on working. For instance, if the refresh page button is also present in the menu, clicking the button will actually refresh the grid.

Here is a Fiddle that shows the issue. If you play around with the width of the grid, you'll be able to reproduce the issue (e.g. 400 px)

Any ideas?

xaume xaume · Accepted Answer · 2016-05-10T14:12:29

Looks like it's a common bug that also happened in earlier versions: https://www.sencha.com/forum/showthread.php?308363

As a workaround, you can use the change event instead of select. Check your Fiddle modified.

ExtJS 6 combobox event in PagingToolbar not working in overflow mode

1 Answers