View Full Version : Fixed height and/or multiple columns Ext.menu.Menu

17 Aug 2012, 6:35 AM
Hi, I am searching for a way to develop an Ext.menu.Menu that would feature, in order of importance, :

- when items count is great enough to enable Ext.menu.Menu scrolling, menu should be still available right under the button, not goes straight up to browser viewport top border.
- fixed height, meaning non-expanding to browser height if sub-items count is to great
- kept scrolling functionality, with top and bottom scrolling buttons
- additionall support for multiple columns in menu item, with already mention features kept

I have already seen menu example that features fixed height here, in Sencha GXT -> http://www.sencha.com/examples/#ExamplePlace:basictoolbar.
When you click ScrollingMenu you get pretty much the same scrolling menu available here http://dev.sencha.com/deploy/ext-3.4.0/examples/menu/menus.html.
The only difference is the latter expands its height to browser viewport size.

I am using Extjs 3.4

At the moment I have developed menu that holds a Ext.Panel wrapping Ext.ButtonGroup as I need buttons there.
Here is the the code:

buttonGroup = new Ext.ButtonGroup({
title : 'Available states',
buttonAlign: 'center',
columns : columnCount,
items : buttons,
cls : 'vertical-menu-buttonGroup'
verticalMenu = new Ext.menu.Menu({
plain : true,
items : new Ext.Panel({
itemId: 'wrapper',

border : false,
autoScroll: true,

height : wrapperHeight,
width : wrapperWidth,
baseCls: 'vertical-menu-panel',

items: buttonGroup
closingPending: false

newStateButton = new Ext.SplitButton({
text : 'mock',
menu : verticalMenu

And what I achieved with that is :
- fixed height of menu
- left-top-corner of menu tapped right under button

Nevertheless I lost ability to use menu scrolling functionality...

17 Aug 2012, 7:07 AM
Thanks to this thread: http://www.sencha.com/forum/showthread.php?67556-Multi-Column-Menus
I removed ButtonGroup and all this wieird panel.

Still if many items is added to my menu it gets expanded to browser viewport with it's scroller.

Current code:

var menuWidth = 0, /// calculated later
stateButtons = generateButtonsArray(),
verticalMenu = new Ext.menu.Menu({
plain : true,
layout : 'column',
items : stateButtons,
width : menuWidth,
closingPending: false

newStateButton = new Ext.SplitButton({
id : 'newStateButton',
text : 'New state',
width : 120,
height : 35,
iconCls : 'newState-button-icon-24',
scale : 'large',
arrowAlign : 'bottom',
arrowTooltip: 'Click to show available states',
menu : verticalMenu