PDA

View Full Version : Utilizing sencha touch elements along with other html elements?



nikolawannabe
28 Mar 2011, 1:39 PM
Hi all.

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({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,

onReady: function () {
var panel = new Ext.Panel({
title: 'Message Title',
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.

nikolawannabe
29 Mar 2011, 11:06 AM
Hello all. I've attempted to remedy this by adding an Ext.util.Scroller to a div that surrounds all of the content on the page, but the scroller does not allow me to scroll to the top of the page. The top 40 or so pixels it just bounces off of so I can't scroll to all the page.

Here's the JS:

Ext.setup({
fullscreen: false,
scroll: 'vertical',
tabletStartupScreen: '',
phoneStartupScreen: '',
onReady: function ()
{
new Ext.util.Scroller(Ext.getDom(Ext.DomQuery.select("#sencha_container"))[0], {
vertical: true,
direction: 'vertical',
bounces: 'vertical'
});
}
});

and here's some sample HTML:

<div id="sencha_container" >
<div style="margin-left: 0.5em; margin-top: 0.5em; margin-bottom: 0.5em;">
<img style="width: 100%" src="/Content/images/site_header_logo.png" /></div>
<p>hello hello hello hello hello hello hello hello hello hello hello hello hello
hello hello hello hello hello hello hello hello hello hello hello hello
hello hello hello hello hello hello hello hello hello hello
hello hello hello hello hello hello hello hello hello hello
hello hello hello hello hello</p>
</div>

Any idea why it's not allowing me to scroll to the top of the div? Thanks.