I am designing a page which has overall 5 panels, Header,Page Title, Carousel, Content and Footer.
Everything is working fine if i use sencha touch scrolling, scrolling:vertical
but if i remove this statement, the page began to scroll automatically to the bottom upon the page load.

Please advise

Here is the code

tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function () {
var header = new Ext.Panel({
style: 'width: 100%',
contentEl: 'divHead',
height: '80'
var carouselPanel = new MyCarousel;
var footer = new Ext.Panel({
style: 'width: 100%;clear:both;',
contentEl: 'divFooter',
height: '50'
var pnl = new Ext.Panel({
items: [header, {
layout: 'card', defaults: { flex: 1 }, contentEl: 'headerContent', style: 'clear:both;'
}, carouselPanel, { id:'ccpanel',
layout: 'card', defaults: { flex: 1 }, contentEl: 'storyContent', style: 'clear:both;'
layout: {
type: 'vbox',
align: 'stretch'

new Ext.Panel({
id: 'homePanel',
cls: 'general',
fullscreen: true,
height: 'auto',
//scroll: 'vertical',
cls: 'general',
style: 'background-color: white;',
layout: {
type: 'vbox',
align: 'stretch'
items: [pnl]