View Full Version : Weird behavior of sencha touch on iphone when dealing with orientation change

6 Jul 2011, 1:40 AM
Sencha Touch version tested:


sencha touch.css ,debug and debug-w-comments
custom css (include details) will include after revision

Platform tested against:

iOS 3.x
iOS 4

Android 2.2


When using iOS and turning the device orientation to landscape, the page isn't rendered fully. It looks like it's getting stuck half way.

The implementation of my project is a primary tabpanel with a docked toptoolbar, a bottom tabbar. With the bottom tabs also tabpanels with carousels in it.

Test Case:

I can send the project if necessary. It's a MVC sencha project.

See this URL : http:// -> currently on secured server.
Other users same problem:

Steps to reproduce the problem:

turn screen with iPhone

The result that was expected:

normal layout as with android

The result that occurs instead:

half filled screen and not usable

Screenshot or Video:


Debugging already done:

Looks like an orientationChange event which stops before rendering the whole page correctly with iOS

Possible fix:
document.body.scrollTop = document.body.scrollHeight; change into
document.body.scrollTop = 0;
in sencha-touch.js

THNX connorsmacartist

14 Jul 2011, 8:01 AM
I had the same issue, I got it fixed by adding an "orientationchange" listener, and inside it calling window.scrollTo(0,0);

My app is using a card layout, so I added this listener to the viewport.

Something like...

new Ext.Application({
name: 'MyApp',

launch: function() {
this.viewport = new Ext.Panel({
fullscreen: true,

id : 'mainPanel',
layout: 'card',
items : [
html: 'Welcome to My App!'
listeners: {
orientationchange: function() {



In my case I'm switching cards on the orientationchange also, with a .doLayout() call afterwards. If this doesn't works for you, try using the "beforeorientationchange" event instead.