title: Sencha Touch 2 - Position a floating panel next to source button
body: <p>I have this code which creates a floating panel centered to the screen:</p>
  
  <pre><code>Ext.define('myapp.view.ButtonNav', {
  extend: 'Ext.Container',
  xtype: 'myapp_buttonnav',
  config: {
      fullscreen: false,
      layout: 'hbox',
      items: [
          {
              xtype: 'button',
              text: 'Button 1',
              listeners: {
                  tap: function () {
                      var panel = Ext.Viewport.add({
                          xtype: 'panel',
                          defaultType: 'button',
                          baseCls: 'btn1_cont',
                          centered: true,
                          layout: {
                              type: 'vbox',
                              align: 'center',
                              pack: 'center'
                          },
                          items: [
                              {
                                  baseCls: 'btn1',
                                  text: 'HOME PAGE',
                                  handler: function() {
                                      Ext.Viewport.setActiveItem({
                                          xtype: 'myapp_homepage'
                                      });
                                      panel.destroy();
                                  }
                              }
                          ],
                          top: // SET TOP TO SOURCE BUTTON
                          left: // SET LEFT TO SOURCE BUTTON
                      });
                  }
              }
          },
  
      ]        
  }
  });
  </code></pre>
  
  <p>As you can see, it is a container, with a button which when clicked shows a floating panel.
  How do i position the floating panel centered to the button that triggered the floating panel?</p>