PDA

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



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

1.10

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


Description:

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:
http://www.sencha.com/forum/showthread.php?129176-Weird-behavior-of-sencha-touch-on-iphone-when-dealing-with-orientation-change


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:

attached


Debugging already done:

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


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



THNX connorsmacartist

ngardner
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() {

window.scrollTo(0,0);

}
}
});
}
});


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.