View Full Version : Problem with menu.showAt()

1 Apr 2014, 11:47 AM
Can someone explain why the following code doesn't show the menu in the top right corner of the panel, but instead shows it offset into the panel, by the amount the panel is offset into the browser (ie 70px + panel the border width)?

Ext.onReady(function () {
Ext.create('Ext.Window', {
renderTo: document.body,
title: 'A Panel',
width: 400,
height: 400,
x: 70,
y: 10,
layout: 'fit',
html: '<div id="menuHere" style="width: 100%;height: 100%"></div>',
listeners: {
afterrender: function (panel) {
var menuCfg = {
renderTo: "menuHere",
floating: true,
items: ["X2", "X2"]

var menu = new Ext.menu.Menu(menuCfg);
menu.showAt(10, 10);


1 Apr 2014, 10:38 PM
I can't fully explain it, but since your window and the menu are both going to be floating and you're rendering the dom for the menu into the window, I would expect odd behavior. The offsets for the window are probably somehow propagating down to the menu because its dom is contained in the window. If you need to dynamically position the menu, I think you're better off rendering it to the document body and then using alignTo to position it (not render it) relative to the div you put in the window.

This aligns the menu to the top right corner:


Of course the menu will go away once you move the window etc - if you want it always open you'd be better off making it not floating and explicitly adding it as an item of the window.

One more point - I think you need to position the menu in the show event for the window. The afterrender event might not be good enough because the window might be rendered with negative offsets that put it off the screen and you can't determine where to put the menu.