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

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.