Ext JS 4: menu appears on the button and not on the top

I try to use a bottom toolbar on a panel. My button has a menu and when the menu is displayed (only the first time) it appears to down and hide the button. This is an example:

Ext.onReady(function(){
 Ext.create("Ext.Viewport", {
  layout: "fit",
  items: {
   xtype: "panel", title: "My Panel",
   bbar: {
    xtype: "toolbar", id: "mybbar",
    items: [{
     id: "myBtn", text: "button 1",
     //menuAlign: 'tl', ... doesn't work
     menu: {
      title: "MENU", 
      //buttonAlign: "left", ... doesn't work
      //defaultAlign: "myBtn", ... doesn't work
      items: [{text: "option 1"}, {text: "option 2"}, {text: "option 3"}]
     }
    }, {text: "button 2"}]
   },
   html: "content"
  }
 });
})

The only way to solve this problem I have found is to add a listener to the button with the following code:

{
 id: "myBtn", text: "button 1",
 menu: {
  title: "MENU", 
  items: [{text: "option 1"}, {text: "option 2"}, {text: "option 3"}]
 },
 listeners: {
  menushow: function(oBtn, oMenu){
   oMenu.alignTo(oBtn);
  }
 }
}

Force the alignment to the button when the menu is displayed.