Ext.toolbar.Toolbar
can automatically transform overflowed toolbar buttons to menu with menu items. To allowed this automatic transformations you need to configure your toolbar
component with config enableOverflow: true
So instead of tbar
config use:
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
enableOverflow: true,
items: [
{
xtype: 'buttongroup',
items: getToolBarButtons()
}
]
}]
Also consider dividing buttons to more buttongroups. If toolbar has more buttongroups ExtJS toolbar can handle overflow with better results.
Fiddle with live example: http://sencha.com/#fiddle/2nd