Correct positioning of a button menu can often be complex to understand. Leaving menu position to default values of
button: {
text: 'Menu',
menuAlign: 'tl-bl?',
menu: {
items: [
{
text: 'Option 1'
},
{
text: 'Option 1'
}
]
}
}The alignment method is not fully explained even though we can assume tl = top left, bl = bottom left and the ? is a function to determine space and then open it either on the bottom or the top of the button. However, documentation is lacking on what these values are in reference to.
In order to gain understanding here we have to look at Ext.util.Positionable. Here we find the definition of alignTo (element (button), position (tl), offset (bl)). Further definition is
- Blank: Defaults to aligning the elements top-left corner to the targets bottom-left corner (“tl-bl”).
- Two anchors: If two values are passed separated by a dash, the first value is used as the elements anchor point, and the second value is used as the targets anchor point.
The second bullet point is where we finally understand the order for menuAlign. The first value is going to be the button and the second value the button.
Options for positioning include
| Value | Description |
| tl | Top left corner |
| t | Center of the top edge |
| tr | Top right corner |
| l | Center of the left edge |
| c | Center |
| r | Center of the right edge |
| bl | Bottom left corner |
| b | Center of the bottom edge |
| br | Bottom right corner |
A caution until fully understanding the menu position. Setting the menu width and/or height can give unexpected results. Once full understanding on what is happening then the unexpected goes away leaving your menu working as expected.
