PDA

View Full Version : Toolbar Oveflow Menu is not properly aligning based on the browser viewport



BulletzBill
31 Aug 2010, 7:22 AM
Hello,

I am using the Ext JS 3.2.1 and am utilizing a toolbar component in my interface with enableOverflow set to true. The toolbar is rendered to a div whose position is fixed and aligned to the bottom of the browser window with a margin of 15px on the left and right side. The toolbar width fills the entire width of the container div and is maintained by the onWindowResize event.

The issue is, and seems to be only in Webkit and Gecko browsers (no problems in IE8, suprisingly :P), is that when the overflow menu is opened for the first time after its button appears, the menu alignment is positioned underneath and to the right of the toolbar button, and since the toolbar is fixed to the bottom of the browser window, the menu appears off-screen and causes the viewport to scroll. But, if the menu is closed and then reopened it positions correctly, above and to the left of the button.

I know that for normal Menu components, you can set the defaultAlign property but I was not able to find anything in the api docs that suggest that i can set this for the toolbar overflow menu.

BulletzBill
31 Aug 2010, 12:13 PM
Just thought of a possible workaround for this, not sure if it would work though:

What if, on the window resize event, I check to see if the toolbar component has a child item that is a menu (my toolbar only has buttons when its not overflowing), and if it does, get that Menu component and manually set its defaultAlign property to be 'br-tr'? Or, since it looks like the defaultAlign is a config-only setting, maybe even the setPagePosition() method might work?

BulletzBill
31 Aug 2010, 2:48 PM
Just thought of a possible workaround for this, not sure if it would work though:

What if, on the window resize event, I check to see if the toolbar component has a child item that is a menu (my toolbar only has buttons when its not overflowing), and if it does, get that Menu component and manually set its defaultAlign property to be 'br-tr'? Or, since it looks like the defaultAlign is a config-only setting, maybe even the setPagePosition() method might work?
Looks like this won't work, as when i try a:

var menus = toolbar.findByType('menu');
when the toolbar's overflow menu is visible, I get an empty array.

BulletzBill
1 Sep 2010, 5:52 AM
Any thoughts/suggestions on this?

BulletzBill
2 Sep 2010, 1:55 PM
Anyone? I've tried pretty much everything I can think of but to no avail.

Condor
3 Sep 2010, 1:29 AM
You need to set the menuAlign option of the more button of the layout, e.g.

{
xtype: 'toolbar',
layoutConfig: {
initMore: function(){
this.constructor.prototype.initMore.call(this);
this.more.menuAlign = 'bl-tl?';
}
},
items: [...]
}
(disclaimer: untested code)

BulletzBill
3 Sep 2010, 10:46 AM
Thanks for the reply Condor. Tried your solution and unfortunately have the same result. That code is definitely getting executed though when the "More" menu is initialized as I verified through some console.log()'s

BulletzBill
6 Sep 2010, 1:10 PM
You need to set the menuAlign option of the more button of the layout, e.g.

{
xtype: 'toolbar',
layoutConfig: {
initMore: function(){
this.constructor.prototype.initMore.call(this);
this.more.menuAlign = 'bl-tl?';
}
},
items: [...]
}
(disclaimer: untested code)

Well I finally found a workaround that seems to fix the problem. Basically, on the show event of the more menu I manually calculate and set its page position based on the location of the toolbar's more button item.

layoutConfig:
{
initMore: function()
{
this.constructor.prototype.initMore.call(this);

var moreItem = this.more;
var moreMenu = moreItem.menu;

moreMenu.on('show', function()
{
var itemPos = moreItem.getPosition();

moreMenu.setPagePosition(itemPos[0] - moreMenu.getWidth() + moreItem.getWidth(),
itemPos[1] - moreMenu.getHeight());
});

}
},
items: [...]