title: Extjs: How to define a working layout for a custom menu
body: <p><strong>ExtJS</strong>:
  I have a button where I want to associate a menu. I want to define the layout of the menu myself, and from what I gather from the <a href="http://dev.sencha.com/deploy/dev/docs/?class=Ext.menu.Menu" rel="nofollow">documentation</a>, the layout can be specified directly.</p>
  
  <p><strong>Button + menu</strong>:</p>
  
  <pre><code>{
      xtype: 'button',        
      menu: {
          xtype: 'menu',
          plain: true,
          layout: 'fit',          
          height: 300,
          width: 200,
          items:
          [
              {
                  xtype: 'container',
                  layout: 'vbox',
                  layoutConfig: {
                      align: 'stretch',
                      pack: 'start'
                  },
                  items:
                  [
                      {
                          xtype: 'label',
                          text: 'Label1'
                      }, {
                          xtype: 'label',
                          text: 'Label2'
                      }, {
                          xtype: 'textfield'
                      }
                  ]
              }
          ]
      },
      menuAlign: 'bl-tl',
      text: 'Button'
  }
  </code></pre>
  
  <p>The result has zero height, but If I change the <code>xtype: 'menu'</code> to <code>xtype: 'panel'</code> and put it inside an <code>Ext.Window</code>, then it works like I want it too.</p>
  
  <p><strong>Question</strong>: How should I customize the menu to get what I want with the correct height?</p>