title: Sencha Touch 2 overlay showBy html div
body: <p>How can I use this to show by a div:</p>
  
  <p>Html</p>
  
  <pre><code>&lt;div class='clickable'&gt;Tap me&lt;/div&gt;
  </code></pre>
  
  <p>JS code (tap is connected to the div element above)</p>
  
  <pre><code>tap      : function(e) {
      overlay = Ext.Viewport.add({
          xtype: 'panel',
          left: 0,
          top: 0,
          modal: true,
          hideOnMaskTap: true,
          hidden: true,
          width: 260,
          height:'70%',
          html: 'STUFF!!',
          styleHtmlContent: true,
          scrollable: true,
          items: [
              {
                  docked: 'top',
                  xtype: 'toolbar',
                  title: 'Overlay Title'
              }
          ]
      });
  
      overlay.showBy(e.getTarget());
  }
  </code></pre>
  
  <p>However this is a nightmare, I'll get these errors with <code>e.getTarget()</code> or <code>e.target</code>, it does work with <code>.show()</code> but its positioning is then wrong. What is the correct way to do this?</p>
  
  <pre><code>Uncaught TypeError: Object #&lt;HTMLTableCellElement&gt; has no method 'getPageBox' 
  </code></pre>