Hello,
while migrating from 5 to 7 I stumbled over a major bug: Using Ext.menu.Menu it's not possible to scroll at all in some browsers (e.g. Firefox). In chrome scrolling is partially working (wrong direction and not smooth at all).
https://fiddle.sencha.com/#fiddle/37fj
Code:
Ext.application({
name: 'Fiddle',
launch: function() {
var scrollMenu = Ext.create('Ext.menu.Menu', {
height: 300,
});
for (var i = 0; i < 50; ++i) {
scrollMenu.add({
text: 'Item ' + (i + 1)
});
};
Ext.create('Ext.panel.Panel', {
width: 500,
height: 500,
items: [{
xtype: 'toolbar',
width: '100%',
height: 40,
items: [{
text: 'Scrolling Menu',
menu: scrollMenu
}]
}],
renderTo: Ext.getBody()
});
}
});
A workaround is to set the overflowHandler to null inside the layout of the menu and set scrollable to true (or to y: true). However, that leads to default scrollbars being applied to the menu which looks awful and doesn't really fit a proper menu, especially when there are more sub menus inside.
This worked in Ext5 and also in 6.0 as far as I tested it. Imho this is a cruicial thing and I would be glad if either a fix or a workaround could be provided.