How can I use Sencha Touch widgets along with regular HTML "widgets"? - sencha-touch

Question

I have a page that I would like to use some sencha items on along with some non-sencha html.
So the page might be...(after loading sencha headers)
<div id="banner"><h1>#if (Model != null)
{#Model.DisplayName}</h1></div>
<div style="background-color: #CFE1E8; padding: 10px; border: 1px solid black; ">
<div id="buttonDiv"></div>
<script type="text/javascript" src="/Content/js/widgets/button.js"></script>
<div id="searchDiv"></div>
<script type="text/javascript" src="/Content/js/widgets/search.js"></script>
<div id="carouselDiv"></div>
<script type="text/javascript" src="/Content/js/widgets/carousel.js"></script>
<div id="panelDiv"></div>
<script type="text/javascript" src="/Content/js/widgets/panel.js"></script>
</div>
Each of the js files contains some sencha code to render the control into the associated div. For example:
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...");
}
}
]
});
}
});
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.
Any suggestions? Thanks.

Answer 1

Try assigning your components a layout and possibly a flex, e.g.:
layout: {
type: 'vbox',
align: 'stretch'
},
and
flex: 1
For scrolling, you could try:
scroll: 'vertical'
Also, another way of using HTML inside sencha is to use the html property in your components, e.g:
new Ext.Panel({
scroll: 'vertical',
layout: {
type: 'vbox',
align: 'stretch'
},
flex: 1
items: [{
html: 'HTML content inside a panel',
}]
});

Answer 2

I ended up doing two things:
Added an Ext.util.Scroller on the body. There's a bug with the Ext.util.Scroller on iPhones that it won't actually let you scroll upwards. Works fine on Androids though.
"Registered" the content of each module's js as a function by pushing to a global variable so that it would get added in the head and then executed them all in a loop, so I only ran Ext.Setup once.