title: How can I use Sencha Touch widgets along with regular HTML "widgets"?
body: <p>I have a page that I would like to use some sencha items on along with some non-sencha html.  </p>
  
  <p>So the page might be...(after loading sencha headers)</p>
  
  <pre><code>&lt;div id="banner"&gt;&lt;h1&gt;@if (Model != null)
  {@Model.DisplayName}&lt;/h1&gt;&lt;/div&gt;
  &lt;div style="background-color: #CFE1E8; padding: 10px; border: 1px solid black; "&gt;
  &lt;div id="buttonDiv"&gt;&lt;/div&gt;
  &lt;script type="text/javascript" src="/Content/js/widgets/button.js"&gt;&lt;/script&gt;
  &lt;div id="searchDiv"&gt;&lt;/div&gt;
  &lt;script type="text/javascript" src="/Content/js/widgets/search.js"&gt;&lt;/script&gt;
  &lt;div id="carouselDiv"&gt;&lt;/div&gt;
  &lt;script type="text/javascript" src="/Content/js/widgets/carousel.js"&gt;&lt;/script&gt;
  &lt;div id="panelDiv"&gt;&lt;/div&gt;
  &lt;script type="text/javascript" src="/Content/js/widgets/panel.js"&gt;&lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Each of the js files contains some sencha code to render the control into the associated div.  For example:</p>
  
  <pre><code>Ext.setup({
      fullscreen: false,
      onReady: function () {
          var panel = new Ext.Panel({
              title: 'Message Title',
              fullscreen: false,
              renderTo: 'buttonDiv',
              defaults: {
                  // applied to each contained item
                  width: 120
  
              },
              items: [
              {
                  xtype: 'button',
                  text: 'Click Me',
                  handler: function () {
                  alert("You Clicked Me...");
              }
  }
  ]
          });
      }
  });
  </code></pre>
  
  <p>The problem I'm having is that when the page is taller than the width of the phone, anytime I touch the screen, the page immediately jumps to the bottom of the page.  The normal page scrolling doesn't work at all.</p>
  
  <p>Any suggestions? Thanks.</p>